e2e-test: more notebook fixes

[midleman]

Intent

Make the notebookCreate.test.ts more stable / less flakey.

Approach

The main issue I noticed with the notebook creation test was that we weren’t properly asserting the text content of locators. We were fetching the locator and then immediately verifying its text. This works fine for non-async code, but since we are dealing with asynchronous behavior, this approach isn’t reliable. Instead, we should leverage Playwright’s built-in retry mechanism in the expect methods, which will automatically keep checking the locator until its text matches the expected value or the timeout is reached.

I'm hoping some of the fixes help other tests that rely on executing code, etc. 🤞

Examples

Don't Do This

This approach fails immediately if the element’s text is not ready.

const textContent = await page.locator('.element').textContent();
expect(textContent).toBe('Expected Text');  // Immediate assertion

Do This

Playwright will retry until the element contains the expected text, making it more resilient.

await expect(page.locator('.element')).toHaveText('Expected Text');  // Waits for the condition to be met

Tip

Your await should always precede the expect and never be "inside" it (like in the first example).

• Use await on the expect statement when you are testing dynamic or asynchronous content where the state of the page may change over time.
• Use await on the locator or property directly when you are certain that the content is ready and available immediately, and you want to perform the assertion right away.

[testlabauto]

LGTM!

[midleman]

just an example, but this is what was problematic. the text is being retrieved immediately, which means it might grab the content before it’s fully rendered or updated, causing the assertion to happen before the text is actually correct/ready... which would def lead to flakes.

[jonvanausdeln]

LGTM! And thanks for the tip on how to assert the text!