Get immediate sibling of locator using PlayWright

Question

This is the DOM structure:

<div class="row">
  <label class="left">foo</label>
  <label class="right">bar</label>
  <label class="left">baz</label>
  <label class="right">qux</label>
  <label class="left">abc</label>         <!-- I know this -->
  <label class="right">123</label>        <!-- I want this -->
</div>

I want the immediate sibling of "abc", i.e. "123".

I tried these, but both time out:

await page.Locator(".row").GetByText("abc").Locator("+ .right").InnerText();

await page.Locator(".row").Locator(":right-of(:text('abc'))").InnerTextAsync();

I also tried using ElementHandle, without success.

How can I get the immediate sibling of the locator above?

UPDATE

As you can see, I already tried the special Playwright syntax "right-of" but it times out. So this is not a dupe of the linked question, which does not work in this case.

Answer 1

following-sibling is the simplest direct way to do it.

This is something which directly can be handled on xpath level so no need to find an feature on playwright level to keep things simple.

You may use the direct following-sibling xpath like below:

//div[@class="row"]//label[contains(.,"abc")]/following-sibling::label[1]