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

Рет қаралды 7,336

Checkly

Күн бұрын

Пікірлер: 43

@SoreBrain 10 ай бұрын

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

@ChecklyHQ 10 ай бұрын

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!

@wazzadev7209 2 күн бұрын

Really good tutorials

@ChecklyHQ 2 күн бұрын

Thank you! 💙

@suchitrakunnath232 Ай бұрын

This was very helpful

@ChecklyHQ Ай бұрын

Thanks for watching! 🦝

@wvo_quine2003 4 ай бұрын

I would be very interested to see a video specifically on the topic of how to decide whether to use GetByTestid as opposed to the more user-behavior locators like GetByRole

@ChecklyHQ 4 ай бұрын

That's a great idea. I'll add it to the list. :)

@kaylee42900 4 ай бұрын

This is just my experience but I've found that if you ever need to concern yourself with localization or accessibility then testid is a great choice. In my previous jobs we've let qa own the data-testids. That meant that testers were the ones creating and updating them. That ensure that they were understandable, unique, in all the right places, etc. We found that every other field either incurred updates from dev at various points in time (eg. accessibility fields would change to better support accessibility usability) or they would change when localization was applied. By using test ids we didn't incur as many test failures from those kind of changes. Even completely refactors of UI still yielded tons of still passing tests since devs made sure to transfer the test ids along.

@wvo_quine2003 4 ай бұрын

Thank you for the reply, that is very helpful @@kaylee42900

@fonziVazquez Жыл бұрын

Awesome! Great Tutorial!

@ChecklyHQ Жыл бұрын

Glad you liked it, Fonzi! 😊

@mariuszpodgorski6695 2 ай бұрын

XPath is giving me flexibility so many functions for example I have Id in child and text and I want to use parent. Or you're case //button[@class='ctl' and text()='Save'] and in my work I copy and paste and if I would look how selector is built it would take me much more time I am even creating dynamic selector replacing a small part of XPath ps. I like your videos it helps me a lot

@ChecklyHQ 2 ай бұрын

Thanks for the comment. Generally, the Playwright recommendation is to test user-first and users don't know about classes or ids. :) But it's great that XPath is working well for you, so keep going. 🦝

@Buraizu 10 ай бұрын

Hi What theme are you using?

@ChecklyHQ 10 ай бұрын

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

@georgedragotoiu2555 11 ай бұрын

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 11 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

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

@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 10 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

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?

@nguyentam0911 4 ай бұрын

I am confusing how to manage locators in Playwright Page object model. Whether to save them in a different file or right in the page object. Could you please give a suggestion?

@ChecklyHQ 3 ай бұрын

I'd always place locators in the page object model itself and haven't see them living elsewhere. If you could share more detailed code examples I'm happy to have a look though.🦝