Tests that are automated in Playwright run fast, which is great. However, sometimes they run so fast that assertions need to be used to stop the test being flaky.
Playwright uses Auto-waiting to help it run tests fast. Auto-waiting means that Playwright performs several checks before making an action, for example, it checks that an element is visible before clicking on it. I have found two situations in which steps in Playwright tests ran so quickly that they caused tests to be flaky. An assertion, that checks that an action has been completed, can be added to a test to prevent this from occurring. The assertion controls the flow of the test so that an action is completed before the next action is executed.
If you automate a test for a configuration with optional items, the button to save those choices is enabled while the user makes their optional configuration choices. After a configuration option has been checked the ‘save’ button will pass the checks that auto-waiting makes and Playwright can click the ‘save’ button before the chosen configuration option has been saved. The test flakes if the optional configuration option has not been saved. So that the test did not flake I added an assertion that checks that the optional element has been selected before the test clicks on save, and the test no longer flakes. An example of this would be:
const locator = page.getByLabel('Subscribe to newsletter');
await locator.click();
await expect(locator).toBeChecked();
await page.getByRole(‘button’{ name: /save/i });
I also found that when Playwright selects an option from a select element, the application may not have completed selecting the option before Playwright makes the next action. The next option, say a button, passes the test for auto-waiting and so Playwright clicks on it before the application completes selecting the option. If the correct option has not been selected the test flakes. To prevent the test flaking I added an assertion that checks that the correct option has been selected before the test makes the next action. An example of this would be:
await page.getByLabel('Choose').selectOption('Test.xsls');
const locator = page.getByLabel('Spreadsheet');
await expect(locator).toHaveText('Test.xsls');
await page.getByRole(‘button’{ name: /continue/i });
Asserts are a good way to make a test wait for an action to complete because an assert waits for its condition to be true instead of waiting for a fixed time.
Playwright uses auto-waiting to wait the minimum time before making an action. Sometimes it is necessary to use an assertion to make the test wait for an action to complete before it takes the next action.
TestAndAnalysis 