Protractor技术问题：如何查找span及通过ng-model定位复选框后续span

Hey there! Let's break down your two Protractor questions clearly:

There are several reliable ways to target span elements depending on your DOM structure:

• By CSS Selector: Use this for straightforward cases, like targeting by class, parent context, or attributes. Examples:

  // Target span by class
  element(by.css('span.checkbox-indicator'));
  // Target span inside a specific parent element
  element(by.css('#form-container span'));
  

• By XPath: Great for more complex hierarchical or text-based targeting:

  // Target span containing specific text
  element(by.xpath("//span[contains(text(), 'Recipient List')]"));
  // Target span by its position relative to another element
  element(by.xpath("//div[@id='toggle-group']/span"));
  

• By Link/Partial Link Text: Only if the span acts as a clickable link:

  // Exact link text match
  element(by.linkText('View Details'));
  // Partial text match
  element(by.partialLinkText('Details'));
  

Given your DOM structure, here are clean, maintainable ways to target that span using the input's ng-model:

Option 1: XPath with ng-model Attribute #

Directly craft an XPath that first targets the input by its ng-model, then selects the following span sibling:

element(by.xpath("//input[@ng-model='newProduct.useRecipientList']/following-sibling::span"));

This works even if there are other elements between the input and span (though in your case, they're adjacent).

Option 2: Chain Locators for Readability #

Split the operation into two steps—first locate the input, then find its sibling span. This makes your code easier to read and debug:

// First get the input element using ng-model
const recipientListInput = element(by.model('newProduct.useRecipientList'));
// Then target the immediately following span sibling
const toggleSpan = recipientListInput.element(by.xpath('following-sibling::span'));

Option 3: CSS Selector (For Adjacent Siblings) #

If the span is the immediately next sibling of the input (which it looks like in your DOM), you can use the CSS adjacent sibling selector +:

element(by.css('input[ng-model="newProduct.useRecipientList"] + span'));

Note: This only works if there are no elements between the input and span. If the structure changes later, the XPath method is more robust.

A quick tip: Since this span uses ::before and ::after pseudo-elements (likely for styling the toggle), you might need to click the span directly to trigger the toggle behavior instead of the input—test both to see which works for your application!

内容的提问来源于stack exchange，提问作者kavitha