CSS attribute and pseudo-class selectors in Selenium Java - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS attribute selector?

A CSS attribute selector matches elements based on the presence or value of an attribute. For example, [type='text'] selects all elements with type attribute equal to 'text'.

intermediate

How do you select elements with a class that starts with 'btn-' using CSS attribute selectors?

Use the selector <code>[class^='btn-']</code>. The <code>^=</code> means 'starts with'. This selects elements whose class attribute value starts with 'btn-'.

beginner

What is a CSS pseudo-class selector?

A CSS pseudo-class selector matches elements in a specific state or position, like <code>:hover</code> for when the mouse is over an element, or <code>:first-child</code> for the first child element.

intermediate

Give an example of using a CSS pseudo-class selector in Selenium Java.

Example: driver.findElement(By.cssSelector("input[type='checkbox']:checked")) selects a checkbox input that is currently checked.

beginner

Why are CSS attribute and pseudo-class selectors useful in Selenium tests?

They allow precise targeting of elements based on attributes or states without relying on IDs or classes alone. This helps make tests more robust and maintainable.

Which CSS selector matches all input elements with a name attribute containing 'user'?

A input[name='user']

B input[name^='user']

C input[name$='user']

D input[name*='user']

The '*=' operator means 'contains'. So input[name*='user'] matches inputs whose name attribute contains 'user' anywhere.

What does the CSS selector button:disabled select?

A Buttons that are enabled

B Buttons that are disabled

C All buttons

D Buttons with class 'disabled'

The ':disabled' pseudo-class matches elements that are disabled, such as buttons that cannot be clicked.

Which selector finds the first <li> element inside a <ul>?

A ul li:first-child

B ul li:last-child

C ul:first-child li

D li:first-child ul

The ':first-child' pseudo-class selects the first child element of its parent. 'ul li:first-child' selects the first

inside each

.

In Selenium Java, how do you select an input with attribute placeholder exactly 'Search'?

A By.cssSelector("input[placeholder='Search']")

B By.cssSelector("input[placeholder*='Search']")

C By.cssSelector("input[placeholder^='Search']")

D By.cssSelector("input[placeholder$='Search']")

The '=' operator matches exact attribute value. So input[placeholder='Search'] matches inputs with placeholder exactly 'Search'.

What does the CSS selector a[href$='.pdf'] select?

A Links with href starting with '.pdf'

B Links with href containing '.pdf'

C Links with href ending with '.pdf'

D All links

The '$=' operator means 'ends with'. So a[href$='.pdf'] selects links whose href attribute ends with '.pdf'.

Explain how CSS attribute selectors work and give examples of different operators.

Think about matching exact, starts with, ends with, and contains.

Describe CSS pseudo-class selectors and how they help in selecting elements in Selenium tests.

Focus on element states and positions.

Practice

1. Which CSS selector correctly selects all <input> elements with a type attribute equal to "text"?

easy

A. input[type^='text']

B. input[type*='text']

C. input[type$='text']

D. input[type='text']

Solution

1. Step 1: Understand attribute selectors

   The selector input[type='text'] matches input elements whose type attribute exactly equals text.

2. Step 2: Differentiate other selectors

   ^= means starts with, $= means ends with, and *= means contains. These do not require exact match.

3. Final Answer:

   input[type='text'] -> Option D

4. Quick Check:

   Exact attribute match = input[type='text'] [OK]

Hint: Use '=' for exact attribute match in CSS selectors [OK]

Common Mistakes:

• Confusing ^= (starts with) with = (exact match)
• Using $= or *= when exact match is needed
• Forgetting to quote attribute values

2. Which of the following is the correct CSS selector syntax to select all <a> elements with an href attribute containing the word "login"?

easy

A. a[href*='login']

B. a[href^='login']

C. a[href$='login']

D. a[href='login']

Solution

1. Step 1: Understand the *= attribute selector

   The selector a[href*='login'] matches a elements whose href attribute contains the substring login anywhere.

2. Step 2: Differentiate other selectors

   ^= matches start, $= matches end, and = matches exact. We want contains, so *= is correct.

3. Final Answer:

   a[href*='login'] -> Option A

4. Quick Check:

   Contains substring = *= [OK]

Hint: Use '*=' to select attributes containing a substring [OK]

Common Mistakes:

• Using ^= or $= instead of *= for substring match
• Forgetting quotes around attribute values
• Using = which requires exact match

3. Given the following HTML snippet:

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
</ul>

What will the CSS selector li.active:first-of-type select?

medium

A. All li elements with class active

B. The first li element with class active

C. No elements, because first-of-type ignores class

D. The first li element in the list regardless of class

Solution

1. Step 1: Understand :first-of-type pseudo-class

   :first-of-type selects the first sibling of its type (here, the first li) regardless of class.

2. Step 2: Combine with class selector

   The selector li.active:first-of-type looks for an li that is both .active and the first li. The first li has no class, so no match.

3. Final Answer:

   No elements, because first-of-type ignores class -> Option C

4. Quick Check:

   first-of-type ignores class, so no match [OK]

Hint: :first-of-type matches first element type ignoring classes [OK]

Common Mistakes:

• Assuming :first-of-type matches first element with class
• Confusing :first-child with :first-of-type
• Ignoring that class must match too

4. You want to select all <button> elements that are disabled using a CSS selector in Selenium. Which selector is incorrect and will cause your test to fail?

medium

A. button:enable

B. button[disabled]

C. button[disabled='disabled']

D. button:disabled

Solution

1. Step 1: Identify valid selectors for disabled buttons

   button:disabled and button[disabled] correctly select disabled buttons. button[disabled='disabled'] also works if attribute equals 'disabled'.

2. Step 2: Spot invalid pseudo-class

   :enable is not a valid CSS pseudo-class. The correct one is :enabled.

3. Final Answer:

   button:enable -> Option A

4. Quick Check:

   Invalid pseudo-class = :enable [OK]

Hint: Use :disabled or [disabled], not :enable [OK]

Common Mistakes:

• Using :enable instead of :enabled
• Assuming [disabled='true'] works (it must match exact value)
• Confusing attribute selector syntax

5. You have a list of <input> elements with various name attributes:

<input name="user_email">
<input name="user_password">
<input name="admin_email">
<input name="admin_password">

Which CSS selector will select only the input elements whose name attribute ends with "_email"?

hard

A. input[name*='_email']

B. input[name$='_email']

C. input[name^='_email']

D. input[name='_email']

Solution

1. Step 1: Understand $= attribute selector

   The selector input[name$='_email'] matches input elements whose name attribute ends exactly with _email.

2. Step 2: Differentiate other selectors

   *= matches contains anywhere, ^= matches starts with, and = matches exact. We want ends with, so $= is correct.

3. Final Answer:

   input[name$='_email'] -> Option B

4. Quick Check:

   Ends with substring = $= [OK]

Hint: Use $= to select attributes ending with a substring [OK]

Common Mistakes:

• Using *= or ^= instead of $= for ends with
• Forgetting quotes around attribute values
• Using = which requires exact match