Learn CSS selectors in 10 minutes
Learn how to use CSS selectors to find an element of the HTML page. You must know this to write readable and stable tests in any UI automation framework (Cypress, Selenium, Webdriverio, etc.). Beginner or not, knowing the CSS selector syntax is a "must-have" in the modern tech world (when working with frontend).
This video is part of the "Cypress test automation tutorial".
Full playlist:
• Test automation
Check out also "XPath selectors in 10 minutes" video:
• Learn XPath selectors in 10 minutes
-----------------------------------------------------------------------------------------------
---------- Selectors used in this demo -------------------------------------
-----------------------------------------------------------------------------------------------
Common selector patterns.
- universal selector, not very useful
div - selecting by element type
("hash" symbol)root - selecting by id
.App - selecting by class
More complex selectors, combinations
header ("more" symbol) h1 - child (one level down in the DOM)
div h1 - descendant (one or more levels down in the DOM tree)
.App , h1 - or (comma separated)
Attribute selectors
[target="_blank"] - attribute & value
[target] - attribute
[target*='la'] - attribute & "wildcard" value
[target^='_b'] - attribute & "starts with" value
[target$='elf'] - attribute & "ends with" value
-----------------------------------------------------------------------------------------------
---------- How to install and run demo react app locally ---------
-----------------------------------------------------------------------------------------------
https://create-react-app.dev/docs/get...
npm install -d create-react-app
npx create-react-app selector-demo
cd selector-demo
npm start
-----------------------------------------------------------------------------------------------
---------- Timeline -------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
0:00 - intro
0:30 - finding elements: CSS, XPath, and cypress-testing-library
1:06 - demo of the react app
1:40 - common CSS selectors
3:20 - combining selectors
5:08 - attribute/value selectors
7:13 - tips when CSS selectors are not enough
9:06 - summary