selenium Atoms getText returns strange values with absolutely positioned elements

🐛 Bug Report

When apply RelativeLocator.above() to a sample page, there is unexpected output produced. See below.

To Reproduce

Detailed steps to reproduce the behavior:

Use this docker-compose to set up environment:

version: '2'

services:

  chrome:
    image: selenium/node-chrome:4.0.0-rc-2-prerelease-20210916
    shm_size: 2gb
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
    ports:
      - "6900:5900"
    volumes: 
      - ./site:/site    

  selenium-hub:
    image: selenium/hub:4.0.0-rc-2-prerelease-20210916
    ports:
      - "4442:4442"
      - "4443:4443"
      - "4444:4444"

Use this page:

<html>
 <head>
   <meta charset="utf-8"/>
 </head>
 <style>
    .c {
    	position: absolute;
    	border: 1px solid black;
    	height: 50px;
    	width: 50px;
    }
 </style>
 <body>
  <div style="position: relative;">
    <div id= "a" class="c" style="left:25;top:0;">El-A</div>
    <div id= "b" class="c" style="left:78;top:30;">El-B</div>
    <div id= "c" class="c" style="left:131;top:60;">El-C</div>
    <div id= "d" class="c" style="left:0;top:53;">El-D</div>
    <div id= "e" class="c" style="left:53;top:83;">El-E</div>
    <div id= "f" class="c" style="left:106;top:113;">El-F</div>
  </div>
 </body>
</html>

which is rendered as

Then use the code like:

WebElement base = driver
        .findElement(By.id("e"));
List<WebElement> cells = driver
        .findElements(
                RelativeLocator
                        .with(By.tagName("div"))
                        .above(base));
cells
        .stream()
        .map(webElement -> webElement.getText())
        .forEach(System.out::println);

Expected behavior

The output produced:

El-B
El-A

Observed behavior:

The output produced:

El-B
El-A
El-A
El-B
El-C
El-D
El-E
El-F

Environment

OS: Ubuntu 20.04 Browser: Chrome Browser version: packaged to official selenium docker image Browser Driver version: packaged to official selenium docker image Language Bindings version: Java 4.0.0-rc-1 Selenium Grid version (if applicable): 4.0.0-rc-2

Sep 20 '21 11:09 ar4development

Thank you for this excellent bug report. Adding this to the 4.0 backlog.

Sep 20 '21 20:09 shs96c

Digging deeper, I think this is actually a problem with getText rather than the relative locators. cells.size() is equal to 3, which are the two elements we expect, plus the containing div (probably because the absolute positioning of everything means the div is empty and so rendered above the elements it contains).

I've landed d1fd31390799121899ff33fa5a42bf815434b4c2 to add the test case, however, as it's a great one. Thank you!

While it's still a bug, it's not one that should block us from getting to 4.0.

Sep 21 '21 08:09 shs96c

@shs96c ahh I see.. that outer div is of zero hight, hence it is above the base and that extra output is the inner text of that zero width div..

Sep 21 '21 13:09 ar4development

@titusfortner @shs96c I suggest we should close the issue. There is no any bugs here.

@ar4development Instead of printing out the texts, you should use assertions. It's an automated test, right?

In this case you would immediately see where is the problem:

    assertThat(cells).hasSize(3);
    assertThat(cells.get(0).getText()).isEqualTo("El-B"); // ok
    assertThat(cells.get(1).getText()).isEqualTo("El-A");  // ok
    assertThat(cells.get(2).getText()).isEqualTo("El-D"); // NOK. Actual result is: "El-A  El-B  El-C  El-D  El-E  El-F"

Aug 26 '22 12:08 asolntsev

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Sep 27 '22 00:09 github-actions[bot]