Skip to content
CodeKruPro

Match attributes with CSS selectors

Automation taskEasy-MediumAsked in: Accenture, Capgemini, Infosys, TCS, Wipro

Interviewers ask for a locator by placeholder, or by an id that always starts the same way. CSS attribute selectors cover both: [placeholder='...'] for an exact value and [name^='pre'] for "starts with". $= means "ends with" and *= means "contains".

CSS Selectors - Attribute Selectors

Video walkthrough

Watch on YouTube

CSS Attribute Selectors

CSS attribute selectors match elements based on their attributes:

  • [attr] - has attribute
  • [attr='value'] - exact match
  • [attr^='value'] - starts with
  • [attr$='value'] - ends with
  • [attr*='value'] - contains

Relevant HTML structure:

<input type="text" id="lastNameWithPlaceholder"
       class="last-name-input"
       placeholder="Enter your last name..." name="lastName">

<input type="text" id="preFilledTextField"
       name="preFilledTextField" value="Codekru">

Task:

  1. Navigate to https://testkru.com/Elements/TextFields
  2. Find the input with placeholder='Enter your last name...' using CSS attribute selector
  3. Print its ID
  4. Find the input whose name starts with pre using [name^='pre']
  5. Print its value

Expected output:

Found by placeholder: lastNameWithPlaceholder
Found by name prefix: Codekru