Make your end-to-end tests more stable with Playwright's user-first selectors

Learn in this video how Playwright's user-first locators like getByRole help to write more stable tests and improve your product user experience.
Use nth() or filter() to select elements by their semantic surrounding elements, and avoid relying on implementation details to test your sites.
Playwright locator docs: playwright.dev/docs/locators#...
Use Playwright for end-to-end monitoring: www.checklyhq.com/product/syn...
#playwright

[@SoreBrain]

Thanks algorithm, this is exactly what I needed but was too lazy to look for myself.

[@ChecklyHQ]

Thanks algorithm for leading you our way. Happy the video was valuable. 😊

[@kondapriyanka3904]

Awesome. You are super clear when you are explaining

[@ChecklyHQ]

Thank you! 😊Happy these videos are valuable!

[@fonziVazquez]

Awesome! Great Tutorial!

[@ChecklyHQ]

Glad you liked it, Fonzi! 😊

[@RIJSA]

Great info thanks

[@ChecklyHQ]

Thanks! Very happy it's been valuable! :)

[@Muhammad55597]

you are the best

[@ChecklyHQ]

Thanks!

[@user-ni2fj8so4f]

What tool do you use for code completion and snippets in this video? Is it something like co-pilot or paid ai tools? Please advise...

[@ChecklyHQ]

It's GitHub Copilot. :)

[@Buraizu]

Hi What theme are you using?

[@ChecklyHQ]

The VS Code theme is YI Dark. marketplace.visualstudio.com/items?itemName=wangweixuan.yithemes

[@blecomp]

Thanks for you video, excellent information. I love your VSCode theme, can you tell me what is its name? thanks again

[@ChecklyHQ]

Stefan uses the Yi themes in light and darkmode 👉 marketplace.visualstudio.com/items?itemName=wangweixuan.yithemes

[@barscanates5573]

Hello! I'm looking for example videos that demonstrate synchronization problems where elements are rendered, but their data isn't rendered at the same time. I want to understand exactly when and how to wait for the necessary data. I've encountered various issues with other testing tools, and I'm planning to start using Playwright. However, I haven't found clear examples yet. For instance, there is a drag-and-drop, no-code web building page. After dragging and dropping an element, there is a delay before the element renders, and sometimes the data for these elements is also delayed. This scenario is not a problem for me; rather, I want to learn how to solve such problems. Another example: I want to wait until a specific element's value has more than 10 characters, indicating that it is ready to use, and then I want to continue with my tests. If you have any video resources or clear examples that could help me understand and solve these synchronization issue I would greatly appreciate it!

[@ChecklyHQ]

These described problems should be solvable via Playwrights web-first assertions and auto-waiting. Generally the rule is that you should only describe your desired UI state in Playwright and let it figure out the rest. Playwright, when used correctly, will wait for the described UI state to be reached or fail. To take the 10 character example you mentioned - this should be solvable with something like `await expect(page.getByRole('heading').toHaveText(/.{10,}/)`. The regular expression indicates that you expect to have this heading a text of at least 10 characters. To learn more about auto-waiting and web-first assertions, we have this video: kzbin.info/www/bejne/b4OtfoGLacqBe8U I hope this helps. :)

[@barscanates5573]

Thank you for the insightful explanation! Playwright's built-in locators and filter magic resemble the selector-chained parent from the target node, such as //div[contains(@class, 'qa-topbar')]//button[contains(@class, 'qa-save-application-button')]. This functionality seems highly valuable, especially when working with complex and dynamic systems @ChecklyHQ. Are there any videos or detailed documentation available about waitForFunction or other waitFor functions?

[@georgedragotoiu2555]

I have a question, what if my website returns two elements that match that filtering? They are both in the same list, both with the Available text, what extra filtering would you add on top of that?

[@ChecklyHQ]

Great question! It's hard to give advise because it depends on the case. If the elements really play the same role in the test I often reach for a quick ".first()" to avoid Playwright's strict mode error. If there's some semantic difference, adding a test id could be another way. Hope this helps. :)

[@gantooria]

There is no shame in accepting that , its a bad development by a bad developer, its not our duty to make everything right on the dom, there will always be such scenarios where you can apply all the filtering yet you dont get it , just use nth element simple

[@og4789]

You can always combine .locator() function with the user first locators or combine user first with user first locators

[@initfive]

Thanks. I'd love to buy a udemy course from you....if you ever make one

[@ChecklyHQ]

Maybe one day! Happy the videos are helpful! 🫶

[@kowshikkumar9868]

I need your help in setting up my framework in playwright. I really need your help bro. Let me know how can I be in touch with you @checkly

[@ChecklyHQ]

Unfortunately, we don't do Playwright consulting at Checkly. But the Playwright discord is excellent to receive help. :) Maybe you can check there.