CSS attribute and pseudo-class selectors in Selenium Java - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an input element with the attribute type="submit".

Selenium Java

WebElement submitButton = driver.findElement(By.cssSelector("input[[1]='submit']"));

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

Aid

Bname

Cclass

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' or 'id' instead of 'type' in the attribute selector.

The CSS attribute selector [type='submit'] selects elements with the attribute type equal to submit.

2fill in blank

medium

Complete the code to select all links (<a>) that have an href attribute starting with 'https'.

Selenium Java

List<WebElement> secureLinks = driver.findElements(By.cssSelector("a[[1]^='https']"));

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

Ahref

Bsrc

Calt

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' or 'alt' which are not attributes of tags.

Confusing '^=' with '*=' or '$=' operators.

The CSS selector a[href^='https'] selects all anchor tags with an href attribute that starts with 'https'. The '^=' means 'starts with'.

3fill in blank

hard

Fix the error in the code to select the first visible button using the :visible pseudo-class (note: Selenium does not support :visible, use :not([hidden]) instead).

Selenium Java

WebElement visibleButton = driver.findElement(By.cssSelector("button[1]"));

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

A:first-child

B:hidden

C:not([hidden])

D:visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using :visible which is unsupported in Selenium.

Using :hidden which selects hidden elements.

Selenium does not support the :visible pseudo-class. Instead, use :not([hidden]) to select elements that are not hidden.

4fill in blank

hard

Fill both blanks to select all input elements that are required and have a name attribute ending with 'email'.

Selenium Java

List<WebElement> requiredEmails = driver.findElements(By.cssSelector("input[1][name[2]'email']"));

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

A:required

B:optional

C$=

D^=

Attempts:

3 left

💡 Hint

Common Mistakes

Using :optional instead of :required.

Using ^= (starts with) instead of $= (ends with).

The selector input:required[name$='email'] selects input elements that are required and whose name attribute ends with 'email'. The :required pseudo-class matches required inputs, and $= means 'ends with'.

5fill in blank

hard

Fill both blanks to select all list items that are the first child and have a class containing 'active'.

Selenium Java

List<WebElement> activeFirstItems = driver.findElements(By.cssSelector("li[1][2]'active'"));

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

A:first-child

B[class*=

C]

D:last-child

Attempts:

3 left

💡 Hint

Common Mistakes

Using :last-child instead of :first-child.

Forgetting to close the attribute selector with a bracket.

The selector li:first-child[class*='active'] selects list items that are the first child of their parent and have a class attribute containing the substring 'active'. The :first-child pseudo-class selects the first child, and [class*='active'] selects elements whose class attribute contains 'active'.