Get a sibling web element using css selector

Question

How can I get a reference to the button? which is always a sibling of the text I'm searching for.

In protractor test:

let spanText = 'My text';
let spanRef = element(by.css('span[name=' + spanText + ']'));

Html:

<div>
  <span name="My text">My text</span>
  <button type="button">
    Click me!
  </button>
</div>

Craig Ayre · Accepted Answer · 2017-08-01 13:53:52Z

4

by.css('span[name=' + spanText + '] + button')

Note that you may want to add quotes to surround spanText since it contains a space. See valid identifiers

With quotes and using template literal syntax:

by.css(`span[name="${spanText}"] + button`)

answered Aug 1, 2017 at 13:21

Craig Ayre

1,1639 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Good job using a CSS selector for that.

Dao Minh Dam · Accepted Answer · 2017-08-09 08:03:50Z

1

Maybe help you:

Xpath:

CSS:

answered Aug 9, 2017 at 8:03

Dao Minh Dam

3731 gold badge2 silver badges14 bronze badges