This video is helpful to understand how narrowing works, so thank you for that! However, as an accessibility engineer there is one problem with the example you have used. It can be difficult for users to identify which "Remove" button is associated with which user or racoon in this case. It would be better to continue to use only the getByRole locator and add unique accessible names to each button, so when I'm navigating with a screen reader I know exactly which user's "remove" action I'm on. One way to do this without changing the visible text and/or visual design would be to add an aria-label to each button. The aria-label should contain the visible text but add more description. Ex. aria-label="Remove Ricky Racoon". With this unique accessible name you can then continue to use getByRole and know your interactive elements are uniquely named for screen reader users. Ex. getByRole('button', { name: 'Remove Ricky Racoon' })
Thank you for your detailed explanation and you're absolutely right. 💙 Great call! I didn't think of `aria-label` when looking for a narrowing example. I might record a follow up covering accessible names.
Hello, I'm currently working on a project as new joiner, is there a way to use the next available port in a localhost using playwright, I'm using 5000 for example, and If this one is running I would like my test uses the next available, hope you can help me with this.
I'm not quite sure I understand, but you should be able to configure your local webserver in the Playwright config. playwright.dev/docs/test-webserver#configuring-a-web-server Does this help?
Thank you, great tip. Now I know, how to combine playwright locators. Great stuff!
Glad it was helpful! 🦝
This video is helpful to understand how narrowing works, so thank you for that! However, as an accessibility engineer there is one problem with the example you have used. It can be difficult for users to identify which "Remove" button is associated with which user or racoon in this case. It would be better to continue to use only the getByRole locator and add unique accessible names to each button, so when I'm navigating with a screen reader I know exactly which user's "remove" action I'm on. One way to do this without changing the visible text and/or visual design would be to add an aria-label to each button. The aria-label should contain the visible text but add more description. Ex. aria-label="Remove Ricky Racoon". With this unique accessible name you can then continue to use getByRole and know your interactive elements are uniquely named for screen reader users. Ex. getByRole('button', { name: 'Remove Ricky Racoon' })
Thank you for your detailed explanation and you're absolutely right. 💙 Great call! I didn't think of `aria-label` when looking for a narrowing example. I might record a follow up covering accessible names.
Useful as always thank you Stefan !
Thank you...very helpful! Just shared on Twitter!
Awesome, thank you!
What is your IDE theme name?
I use "Yi Dark". :)
Hello, I'm currently working on a project as new joiner, is there a way to use the next available port in a localhost using playwright, I'm using 5000 for example, and If this one is running I would like my test uses the next available, hope you can help me with this.
I'm not quite sure I understand, but you should be able to configure your local webserver in the Playwright config. playwright.dev/docs/test-webserver#configuring-a-web-server Does this help?
Love your videos 🤩 Keep it up
Thanks! 💙 Happy you like them!