Playwright Tips and Tricks

TipsNTricks #20

Create reusable assertions and custom checks with "expect.extend". It's like building your shortcuts for testing.

Here is how you would use it in a test

TipsNTricks #19

Isolating tests with browser contexts? Here's how you can do it
browser.newContext()
vs
browser.newContext({ storageState: { cookies: [], origins: [] }});

TipsNTricks #18

Playwright v1.45 got a time machine!
The new "clock.setSystemTime" lets you control the system time within your tests.

TipsNTricks #17

Use trial option with "locator.check" to verify a checkbox/radio is ready for interaction. Great for checking element state before continuing your test!

TipsNTricks #16

Having trouble with tests failing randomly in Playwright? Run each test multiple times with "repeatEach" to catch those random failures and make your tests more reliable.

TipsNTricks #15

Don't let failing checks stop your tests!
Playwright's soft assertions let your test run & catch multiple issues at once.

TipsNTricks #14

grantPermissions lets you simulate user-granted permissions for your contexts!
Give your tests access to clipboard, camera, microphone & more!

TipsNTricks #13

Tired of juggling test fixtures across files?
Merge them with mergeTests!
Combine fixtures from multiple files for cleaner & more organized tests.

TipsNTricks #12

Locator.all() lets you iterate over all matching elements. Great for checking multiple checkboxes!

TipsNTricks #11

For smoother debugging, add a box option to your test step! 👀
It shifts errors to the step call, highlighting the entire step instead of the internal action.

TipsNTricks #10

Closing page instances? Use the reason option to explain why. Works for browsers & contexts too! (v1.40+)

TipsNTricks #9

Instead of rerunning all tests after making fixes, use the --last-failed option to rerun only the ones that failed in the previous run! (available from v1.44)

TipsNTricks #8

Filter tests easily in Playwright using tags!
Ditch the "@" in titles. Pass tags directly as an object property!
( available from v1.42 )

TipsNTricks #7

Stop pop-ups from causing flaky tests! 📢
Added in v1.42, addLocatorHandler lets you handle unexpected elements.

TipsNTricks #6

Not all elements have a specific data-testid present with them. In such cases, we can chain multiple data-testids or filter roles by name/data-testid instead of using class/id.

TipsNTricks #5

Confused about the parallelization modes in Playwright? Here you go:

Parallel: All tests run in parallel.
Serial: Tests execute in sequence. If one fails, the rest are skipped.
Default: Tests execute in sequence. If one fails, the rest are unaffected.

TipsNTricks #4

Want to supercharge your test speeds?
Utilize .map() and Promise.all to run repetitive actions in parallel for peak efficiency.

Running the repetitive actions using loops will result in the next iteration being blocked until the previous action has been completed. This slows down the test execution.

Using .map() to create an array of Promises and using Promise.all to resolve all of them will result in parallel execution and speed up the test execution.

TipsNTricks #3

Not all checkboxes play by the rules!
When using Locator.check() on some checkboxes, it throws the following error: "Clicking the checkbox did not change its state".
For those stubborn ones, use Locator.click() instead of Locator.check() to toggle their state directly.

Bonus

We can define custom methods to check and uncheck checkboxes based on whether they are already checked. Check out the implementation below.

TipsNTricks #2

Did you know it's redundant to use Locator.clear() before Locator.fill() in Playwright?

Here's why:
- fill() replaces the contents of a textbox with a new string instead of appending it.
- It also triggers an input event.
- This means filling an input with an empty string (fill("")) is equivalent to (clear()).

So, to streamline your code and save a few keystrokes, simply use fill() without clear() on a textbox!

TipsNTricks #1

While auto-retrying assertions are fantastic for reducing test flakiness, there are situations where they cannot be used. Here's where .poll() and .toPass() come in to save the day!

.toPass(): This method lets you retry a block of statements until all of them pass within a specified timeout. This is perfect for scenarios where multiple assertions need to succeed for your test to be valid.
.poll(): Need to convert a generic assertion into an auto-retrying one? Look no further than .poll(). It takes a method returning a value and chains it to an assertion. The method is retried until the chained assertion passes or the timeout is reached.

These techniques give you finer control over asynchronous assertions, ensuring your Playwright tests are robust and reliable.