Black November: every course and Teams plan at the lowest price of the year with code BLACKFRIDAY, through November 30. Shop the deal

CSS Selectors for Test Automation

€19.00 37 Lessons Exercises
CSS Selectors for Test Automation online course

About this course

A CSS selector is a short expression that points at one or more elements on a page by tag, id, class, attribute, or relationship. In test automation it is usually the first choice for finding elements, because it is fast and reads cleanly. This course teaches CSS selectors for locating elements reliably, with live practice on every selector.

Common CSS selectors

Selector Matches
.btn-primary every element with class btn-primary
#checkout the element with id checkout
input[type='email'] email inputs
nav > a links that are direct children of nav
li:nth-child(2) the second list item
[data-test='submit'] the element tagged for testing

A quick example

/* A stable hook meant for tests, not styling */
[data-test='add-to-cart']

The course covers combinators, pseudo-classes, and how to pick selectors that survive a redesign, all with instant feedback.

Course Content

0 Getting Started
1 lesson 3 min
37 lessons Total 1h 11 min total duration

About your instructor

Roy de Kleijn, Testsmith instructor

Roy de Kleijn · Software testing trainer

Roy de Kleijn has more than 15 years of hands-on experience in software testing and test automation. He writes and maintains every Testsmith course, so what you practise matches how the work is really done.

Connect on LinkedIn
Log in to enroll

Don't have an account? Register

What you get

  • 37 comprehensive lessons
  • Learn at your own pace
  • Interactive exercises
  • Track your progress
Frequently Asked Questions
Version 1.0.0

Questions?

Contact us if you have any questions about this course.

Contact us

Frequently asked questions

Use square brackets, for example input[type='email'] matches email inputs. You can match an exact value, a prefix with ^=, or a substring with *=. For test automation a dedicated hook like [data-test='submit'] is the most stable target, because it does not change when the styling does.

A space, as in nav a, matches a link anywhere inside nav. A greater-than sign, as in nav > a, matches only links that are direct children of nav. The child combinator is tighter, so it helps when a looser match would pick up elements you did not mean to target.

Selectors tied to purpose last longer than ones tied to looks. A data attribute added for testing, or a stable id, survives a redesign. Long chains of classes and nth-child positions tend to break. The course shows how to choose selectors that hold up as the page changes.

Yes. You get videos, quizzes, and hands-on labs, and you work through them at your own pace, with no fixed schedule.

No. The hands-on labs for this course run in your browser, so you can start practising straight away without any local setup.

Yes. You earn a certificate of completion when you finish the course.

Software testers and QA engineers who want practical, job-ready skills, from the fundamentals through to a real project.

XPath: Locate Elements Using XPath

Learn XPath for test automation. Locate any element by structure, text, or attribute, with axes and functions...

Playwright with TypeScript

Playwright training with TypeScript, self-paced and online. Locators, auto-waiting, page objects, API and UI t...

JavaScript & TypeScript for Testers

Learn JavaScript and TypeScript for test automation. The types, async, and tooling that Playwright and Cypress...