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
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.
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
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. 🦝
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?
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. :)
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
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!
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: th-cam.com/video/9RJMNU4eNEc/w-d-xo.html I hope this helps. :)
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?
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?
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.🦝
Thanks algorithm, this is exactly what I needed but was too lazy to look for myself.
Thanks algorithm for leading you our way. Happy the video was valuable. 😊
Awesome. You are super clear when you are explaining
Thank you! 😊Happy these videos are valuable!
Really good tutorials
Thank you! 💙
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
That's a great idea. I'll add it to the list. :)
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.
Thank you for the reply, that is very helpful @@kaylee42900
Hi What theme are you using?
The VS Code theme is YI Dark. marketplace.visualstudio.com/items?itemName=wangweixuan.yithemes
This was very helpful
Thanks for watching! 🦝
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
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. 🦝
Awesome! Great Tutorial!
Glad you liked it, Fonzi! 😊
Thanks for you video, excellent information. I love your VSCode theme, can you tell me what is its name? thanks again
Stefan uses the Yi themes in light and darkmode 👉 marketplace.visualstudio.com/items?itemName=wangweixuan.yithemes
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?
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. :)
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
You can always combine .locator() function with the user first locators or combine user first with user first locators
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!
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: th-cam.com/video/9RJMNU4eNEc/w-d-xo.html
I hope this helps. :)
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?
Great info thanks
Thanks! Very happy it's been valuable! :)
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?
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.🦝
you are the best
Thanks!
Thanks. I'd love to buy a udemy course from you....if you ever make one
Maybe one day! Happy the videos are helpful! 🫶
@@ChecklyHQ Same here. You are the best.
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
Unfortunately, we don't do Playwright consulting at Checkly. But the Playwright discord is excellent to receive help. :) Maybe you can check there.