Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Atoms getText returns strange values with absolutely positioned elements

See original GitHub issue

🐛 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

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

asolntsevcommented, Aug 26, 2022

@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"

0reactions

github-actions[bot]commented, Sep 27, 2022

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.

Top Results From Across the Web

Issue with Absolutely Positioned Element and CSS Transitions

I am making a website with a lot of absolutely positioned elements. I have them contained in a "page wrap" that is centered...

GNU gettext utilities

Users achieve localization of programs by setting proper values to ... Components of locale outside of message handling are standardized in the ISO...

CSS absolute and fixed positioning - W3C Wiki

Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or...

4 reasons your z-index isn't working (and how to fix it)

Z-index is a CSS property that allows you to position HTML elements in layers on top of one another. It seems simple at...

How to Center an Absolutely Positioned Element Using CSS

Its location is determined in relation to the most immediate parent element that has a position value of absolute , relative , or...