Playwright selectors in-depth for beginners (with best practices and examples)

An in-depth look at selectors with Playwright for beginners. Consists of a general intro, best practices and practical examples.
Goals:
- Learn how to find & test selectors including
a. CSS selectors
b. XPath selectors
c. Playwright text selectors
- Learn selector best practices to
a. Distinguish between solid and brittle selectors
b. Optimise existing selectors when possible
Resources shown:
- danube-webstore.herokuapp.com
- playwright.dev
- github.com/checkly/headless-r...
Machine specs: MacBook Pro (13-inch, M1, 2020), macOS Big Sur (11.5.2)
Danube credentials: [e-mail] / supersecure1
Next steps:
- Try inspecting elements on Danube and coming up with different selectors for the same item. Then test them and verify they work.
- Research CSS selector syntax (XPath can be helpful, too) and try to understand its basic logic.
Additional resources:
- The excellent guide to selectors on Playwright’s official docs: playwright.dev/docs/selectors
- I sometimes post automation threads on Twitter @rag0g (get in touch!)
- My guide on selectors on Checkly’s open-source guides: www.checklyhq.com/learn/headl...

[@peterspencer5112]

Noob to CSS Selectors this is best video I've seen on the topic thanks

[@shaunregan8088]

Good content. Exactly what I needed. Hopefully you can do the deep dive videos on xpath and css selectors. I’ve liked and subscribed

[@Matkotech]

Awsome content, keep up the good work! 💪

[@flaviokonti5522]

Top explanation 👍

[@prasadmadge8895]

Thanks for the awesome content. It helped allot.

[@RockalaCarta]

Excellent!... rock and coding... my passion!

[@prewinder]

Thank you, this was most helpful. Maybe you should turn this into a Udemy-class? You speak clearer than most of their tutors. What is the difference between using headless recorder versus playwrights recorder?

[@TristanBailey]

Some good advice on choice of selector for locator but more advice to build app better hocks rather than test better in playwright as title suggests

[@Doctor_Frog_9000]

Is there a way to select one element that has 1. A class name shared by other elements 2.Its text?

[@bloodylessy8608]

Hey ho. Great Video. Exactly what I was looking for so liked and subscripted :). Quick question : What is the best way to deal with some sort of "2 step authentication" (getting an code per email or clicking on a link to verify) I thought about some if/else condition like If "logged-in-page" is loaded within a certain timespan proceed... else print out in Error message "xy". Do you have an elegant solution for this case? (ps I know you could also open your mail acc. with playwright and fetch the needed data out of the arriving email, but on a Clear browser you should run into the same problem logging into your email acc). Best wishes and thank you mate :)

[@clifflikovo6836]

😂😂😂😂 where can i get the parry hotter book?

[@daddy_eddy]

Store was closed. You need to make new video.

[@husseinkaplan]

اهاه

[@adejerry6338]

hahahah