Advanced XPath and CSS Locator Strategies

Basic Locator Strategies

What to do: Use one direct locator type per row (id, name, class, tagName, linkText, partialLinkText) and click only the target element.

Expected result: Each row chip changes to Passed after the correct target click.

1. By idPending
   ID Target
2. By namePending
   Name Target
3. By classPending
   Class Target
4. By tagNamePending
   Ignore this TagName Target
5. By linkTextPending
   Open Selenium Locator Resource
6. By partialLinkTextPending
   Read Full Practice Guide For XPath

Relative XPath Functions

What to do: Use the exact XPath function requested for each row (text(), contains(), starts-with(), grouped index, combo predicates, and multi-attribute predicates).

Expected result: Correct target click sets the corresponding chip to Passed.

1. Use text()Pending
   Checkout Now
2. Use contains()Pending
   Contains Target
3. Use starts-with()Pending
   Starts With Target
4. Grouping/Capture style with parentheses (pick 2nd match)Pending
   Save Draft Save Final Save Archive
5. Combination of functions: contains(text()) + starts-with(@id)Pending
   Run Combo Validation
6. Multiple attributes in XPath predicatePending
   Ignore Pay Gold

XPath Axes

What to do: Start from nearby anchor elements and traverse using requested axes (child, parent, ancestor, sibling, forward, and backward traversal).

Expected result: Each axis task marks Passed only when the right target is clicked.

1. Axis: child::Pending
   Child Axis Target
2. Axis: parent::Pending
   AnchorParent Axis Target
3. Axis: ancestor::Pending

   Leaf

   Ancestor Axis Target
4. Axis: following-sibling::Pending
   BillingFollowing Sibling Target
5. Forward traversing: following::Pending
   Start NodeGapForward Axis Target
6. Backward traversing: preceding::Pending
   Backward Axis TargetAnchor Node
7. Sibling traversal both sidesPending
   LeftMiddle AnchorRight Sibling Target

Relative CSS Selectors

What to do: Use CSS selector syntax for #id, .class, multiple classes, tag selector, and multi-attribute selectors.

Expected result: Each CSS row chip changes to Passed after successful target click.

1. By CSS #idPending
   CSS ID Target
2. By CSS .classPending
   CSS Class Target
3. By CSS multiple classesPending
   CSS Multi Class Target
4. By CSS tagName (scoped)Pending
   CSS Tag Target
5. By CSS multiple attributesPending
   CSS Multi Attribute Target

CSS Attribute "Functions"

What to do: Use CSS attribute operators *= (contains) and $= (ends-with) to match partial attribute values.

Expected result: Correct target click updates each function row to Passed.

1. Contains equivalent [attr*='value']Pending
   CSS Contains Target
2. Ends-with equivalent [attr$='value']Pending
   CSS Ends With Target

CSS Parent/Child and Sibling Concepts

What to do: Use relationship selectors for direct child (>), descendant (space), and sibling combinators (+/~).

Expected result: All three relationship tasks show Passed when correct targets are clicked.

1. Direct child selector parent > childPending
   Direct Child Target

   Nested Ignore
2. Indirect descendant selector parent childPending
   Indirect Child Target
3. Following sibling selector + / general sibling ~Pending
   Sibling StartFollowing Sibling CSS TargetAnother Sibling

Completion