CSS selector syntax in Selenium Java - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element by its ID using CSS selector syntax.

Selenium Java

driver.findElement(By.cssSelector("[1]"));

Drag options to blanks, or click blank then click option'

A.submitBtn

B*submitBtn

CsubmitBtn

D#submitBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.' which selects by class instead of ID.

Using the ID name without '#' which is invalid in CSS selectors.

In CSS selectors, the '#' symbol is used to select elements by their ID attribute.

2fill in blank

medium

Complete the code to select elements by their class name using CSS selector syntax.

Selenium Java

List<WebElement> buttons = driver.findElements(By.cssSelector("[1]"));

Drag options to blanks, or click blank then click option'

AbuttonClass

B#buttonClass

C.buttonClass

D*buttonClass

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' which selects by ID instead of class.

Using the class name without '.' which is invalid in CSS selectors.

In CSS selectors, the '.' symbol is used to select elements by their class attribute.

3fill in blank

hard

Fix the error in the CSS selector to select all <input> elements with type='text'.

Selenium Java

List<WebElement> inputs = driver.findElements(By.cssSelector("input[1]"));

Drag options to blanks, or click blank then click option'

A[type='text']

B(type='text')

C{type='text'}

D<type='text'>

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or curly braces instead of square brackets.

Using angle brackets which are invalid in CSS selectors.

Attribute selectors in CSS use square brackets []. To select input elements with type='text', use input[type='text'].

4fill in blank

hard

Fill both blanks to select all <div> elements with class 'container' that are direct children of <section> elements.

Selenium Java

List<WebElement> containers = driver.findElements(By.cssSelector("section[1]div[2]container"));

Drag options to blanks, or click blank then click option'

A >

B.

C#

D +

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' instead of '.' for class selection.

Using '+' which selects adjacent siblings, not children.

The '>' symbol selects direct children in CSS. The '.' symbol selects by class name. So 'section > div.container' selects div elements with class 'container' that are direct children of section elements.

5fill in blank

hard

Fill both blanks to select all <a> elements inside a <nav> with class 'main-nav' that have an href attribute starting with 'https'.

Selenium Java

List<WebElement> links = driver.findElements(By.cssSelector("nav[1] a[2]"));

Drag options to blanks, or click blank then click option'

A.main-nav

C[href^='https']

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' instead of space for descendant selection.

Using '#' instead of '.' for class selection.

Incorrect attribute selector syntax.

'.main-nav' selects elements with class 'main-nav'. A space ' ' selects descendants. '[href^='https']' selects elements with href attribute starting with 'https'. So 'nav.main-nav a[href^='https']' selects all inside

with href starting with https.