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-webstor...
- playwright.dev
- github.com/che...
Machine specs: MacBook Pro (13-inch, M1, 2020), macOS Big Sur (11.5.2)
Danube credentials: user@email.com / 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...
- I sometimes post automation threads on Twitter @rag0g (get in touch!)
- My guide on selectors on Checkly’s open-source guides: www.checklyhq....