search

mozilla / geckodriver

WebDriver for Firefox
https://firefox-source-docs.mozilla.org/testing/geckodriver/
Mozilla Public License 2.0
7.03k stars 1.51k forks source link

Element.text not returning innerText inside shadow roots #2093

Closed floa93 closed 1 year ago

floa93 commented 1 year ago

System

Testcase

Start the firefox using the selenium docker command: docker run -d -p 4444:4444 --shm-size="2g" selenium/standalone-firefox:4.8.1-20230221

I used the UI5 documentation page for the example which is using shadow roots.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By

driver = webdriver.Remote(
   command_executor='http://127.0.0.1:4444/wd/hub',
   options=webdriver.FirefoxOptions()
)

driver.get("https://sap.github.io/ui5-webcomponents/playground/components/Table/")
driver.implicitly_wait(2)

elem = driver.find_element(By.TAG_NAME, "body")
print(elem.text)
driver.close()

The use case is that I want to check if my page contains for example an UI5 table with cell containing "Smartcards": image

Stacktrace

Firefox returns "" instead of the table. The output looks like this on firefox:(I removed the bottom unnecessary part)

Getting started
Advanced
Customizing
Frameworks
Development
Contributing
FAQ
Changelog
Components
Avatar
Avatar Group
Badge
Bar
Barcode Scanner Dialog
Breadcrumbs
Busy Indicator
Button
Calendar
Card
Carousel
Check Box
Color Palette
Color Palette Popover
Color Picker
Combo Box
Date Picker
Date Range Picker
Date Time Picker
Dialog
Dynamic Side Content
File Uploader
Flexible Column Layout
Icon
Illustrated Message
Input
Label
Link
List
Media Gallery
Menu
NEW
Message Strip
Multi Combo Box
Multi Input
Notification List Group Item
Notification List Item
Page
Panel
Popover
Product Switch
Progress Indicator
Radio Button
Range Slider
Rating Indicator
Responsive Popover
Segmented Button
Select
Shell Bar
Side Navigation
Slider
Split Button
Step Input
Switch
Tab Container
Table
Text Area
Time Picker
Timeline
Title
Toast
Toggle Button
Tree
Upload Collection
View Settings Dialog
Wizard
Components Table
Table
@ui5/webcomponents
<ui5-table>
Basic Table
Products table - resize your browser to make some columns pop-in
<!-- Header -->
<div class="header">
 <span>Products table - resize your browser to make some columns pop-in</span>
 <button id="toggleSticky" style="height: 32px">Toggle Sticky Column Header</button>
</div>

<ui5-table class="demo-table" id="table">
 <!-- Columns -->
 <ui5-table-column slot="columns">
  <span style="line-height: 1.4rem">Product</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="800">
  <span style="line-height: 1.4rem">Supplier</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Dimensions</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Weight</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Price</span>
 </ui5-table-column>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 15HT-1000</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">30 x 18 x 3cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">956EUR</ui5-table-cell>
 </ui5-table-row>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 17HT-1001</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">29 x 17 x 3.1cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.5KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">1249EUR</ui5-table-cell>
 </ui5-table-row>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 18HT-1002</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">28 x 19 x 2.5cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">1570EUR</ui5-table-cell>
 </ui5-table-row>

 ...
</ui5-table>

So the visible HTML is the example below the real table and the real table is not "seen" on the page.

Compared to Chrome v110:

Getting started
Advanced
Customizing
Frameworks
Development
Contributing
FAQ
Changelog
Components
Avatar
Avatar Group
Badge
Bar
Barcode Scanner Dialog
Breadcrumbs
Busy Indicator
Button
Calendar
Card
Carousel
Check Box
Color Palette
Color Palette Popover
Color Picker
Combo Box
Date Picker
Date Range Picker
Date Time Picker
Dialog
Dynamic Side Content
File Uploader
Flexible Column Layout
Icon
Illustrated Message
Input
Label
Link
List
Media Gallery
Menu
NEW
Message Strip
Multi Combo Box
Multi Input
Notification List Group Item
Notification List Item
Page
Panel
Popover
Product Switch
Progress Indicator
Radio Button
Range Slider
Rating Indicator
Responsive Popover
Segmented Button
Select
Shell Bar
Side Navigation
Slider
Split Button
Step Input
Switch
Tab Container
Table
Text Area
Time Picker
Timeline
Title
Toast
Toggle Button
Tree
Upload Collection
View Settings Dialog
Wizard
Components Table
Table
@ui5/webcomponents
<ui5-table>
Basic Table
Products table - resize your browser to make some columns pop-in
Toggle Sticky Column Header
Product Supplier Dimensions Weight Price
Notebook Basic 15HT-1000
Very Best Screens30 x 18 x 3cm4.2KG956EUR
Notebook Basic 17HT-1001
Very Best Screens29 x 17 x 3.1cm4.5KG1249EUR
Notebook Basic 18HT-1002
Very Best Screens28 x 19 x 2.5cm4.2KG1570EUR
Notebook Basic 19HT-1003
Smartcards32 x 21 x 4cm4.2KG1650EUR
ITelO VaultHT-1007
Technocom32 x 22 x 3cm0.2KG299EUR
Notebook Professional 15HT-1010
Very Best Screens33 x 20 x 3cm4.3KG1999EUR
Notebook Professional 17HT-1011
Very Best Screens33 x 23 x 2cm4.1KG2299EUR
ITelO Vault NetHT-1020
Technocom10 x 1.8 x 17cm0.16KG459EUR
ITelO Vault SATHT-1021
Technocom11 x 1.7 x 18cm0.18KG149EUR
Comfort EasyHT-1022
Technocom84 x 1.5 x 14cm0.2KG1679EUR
Comfort SeniorHT-1023
Technocom80 x 1.6 x 13cm0.8KG512EUR
<!-- Header -->
<div class="header">
 <span>Products table - resize your browser to make some columns pop-in</span>
 <button id="toggleSticky" style="height: 32px">Toggle Sticky Column Header</button>
</div>

<ui5-table class="demo-table" id="table">
 <!-- Columns -->
 <ui5-table-column slot="columns">
  <span style="line-height: 1.4rem">Product</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="800">
  <span style="line-height: 1.4rem">Supplier</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Dimensions</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Weight</span>
 </ui5-table-column>

 <ui5-table-column slot="columns" class="table-header-text-alignment">
  <span style="line-height: 1.4rem">Price</span>
 </ui5-table-column>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 15HT-1000</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">30 x 18 x 3cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">956EUR</ui5-table-cell>
 </ui5-table-row>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 17HT-1001</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">29 x 17 x 3.1cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.5KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">1249EUR</ui5-table-cell>
 </ui5-table-row>

 <ui5-table-row>
  <ui5-table-cell>Notebook Basic 18HT-1002</ui5-table-cell>
  <ui5-table-cell>Very Best Screens</ui5-table-cell>
  <ui5-table-cell style="text-align: right">28 x 19 x 2.5cm</ui5-table-cell>
  <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
  <ui5-table-cell style="text-align: right">1570EUR</ui5-table-cell>
 </ui5-table-row>

 ...
</ui5-table>

If i go into the firefox browser on my desktop (win11) and i use JS then i see the text in .innerText document.body.innerText


UI5 Web Components
Getting started
Advanced
Customizing
Frameworks
Development
Contributing
FAQ
Changelog
Components
Avatar
Avatar Group
Badge
Bar
Barcode Scanner Dialog
Breadcrumbs
Busy Indicator
Button
Calendar
Card
Carousel
Check Box
Color Palette
Color Palette Popover
Color Picker
Combo Box
Date Picker
Date Range Picker
Date Time Picker
Dialog
Dynamic Side Content
File Uploader
Flexible Column Layout
Icon
Illustrated Message
Input
Label
Link
List
Media Gallery
Menu
NEW
Message Strip
Multi Combo Box
Multi Input
Notification List Group Item
Notification List Item
Page
Panel
Popover
Product Switch
Progress Indicator
Radio Button
Range Slider
Rating Indicator
Responsive Popover
Segmented Button
Select
Shell Bar
Side Navigation
Slider
Split Button
Step Input
Switch
Tab Container
Table
Text Area
Time Picker
Timeline
Title
Toast
Toggle Button
Tree
Upload Collection
View Settings Dialog
Wizard
Components  Table
Table
@ui5/webcomponents
<ui5-table>
Basic Table
Products table - resize your browser to make some columns pop-in
Toggle Sticky Column Header
ProductDimensionsWeightPrice
Notebook Basic 15HT-1000
    30 x 18 x 3cm   4.2KG   956EUR  
Notebook Basic 17HT-1001
    29 x 17 x 3.1cm 4.5KG   1249EUR 
Notebook Basic 18HT-1002
    28 x 19 x 2.5cm 4.2KG   1570EUR 
Notebook Basic 19HT-1003
    32 x 21 x 4cm   4.2KG   1650EUR 
ITelO VaultHT-1007
    32 x 22 x 3cm   0.2KG   299EUR  
Notebook Professional 15HT-1010
    33 x 20 x 3cm   4.3KG   1999EUR 
Notebook Professional 17HT-1011
    33 x 23 x 2cm   4.1KG   2299EUR 
ITelO Vault NetHT-1020
    10 x 1.8 x 17cm 0.16KG  459EUR  
ITelO Vault SATHT-1021
    11 x 1.7 x 18cm 0.18KG  149EUR  
Comfort EasyHT-1022
    84 x 1.5 x 14cm 0.2KG   1679EUR 
Comfort SeniorHT-1023
    80 x 1.6 x 13cm 0.8KG   512EUR  
<!-- Header -->
<div class="header">
    <span>Products table - resize your browser to make some columns pop-in</span>
    <button id="toggleSticky" style="height: 32px">Toggle Sticky Column Header</button>
</div>

<ui5-table class="demo-table" id="table">
    <!-- Columns -->
    <ui5-table-column slot="columns">
        <span style="line-height: 1.4rem">Product</span>
    </ui5-table-column>

    <ui5-table-column slot="columns" min-width="800">
        <span style="line-height: 1.4rem">Supplier</span>
    </ui5-table-column>

    <ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
        <span style="line-height: 1.4rem">Dimensions</span>
    </ui5-table-column>

    <ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
        <span style="line-height: 1.4rem">Weight</span>
    </ui5-table-column>

    <ui5-table-column slot="columns" class="table-header-text-alignment">
        <span style="line-height: 1.4rem">Price</span>
    </ui5-table-column>

    <ui5-table-row>
        <ui5-table-cell>Notebook Basic 15HT-1000</ui5-table-cell>
        <ui5-table-cell>Very Best Screens</ui5-table-cell>
        <ui5-table-cell style="text-align: right">30 x 18 x 3cm</ui5-table-cell>
        <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
        <ui5-table-cell style="text-align: right">956EUR</ui5-table-cell>
    </ui5-table-row>

    <ui5-table-row>
        <ui5-table-cell>Notebook Basic 17HT-1001</ui5-table-cell>
        <ui5-table-cell>Very Best Screens</ui5-table-cell>
        <ui5-table-cell style="text-align: right">29 x 17 x 3.1cm</ui5-table-cell>
        <ui5-table-cell style="text-align: right">4.5KG</ui5-table-cell>
        <ui5-table-cell style="text-align: right">1249EUR</ui5-table-cell>
    </ui5-table-row>

    <ui5-table-row>
        <ui5-table-cell>Notebook Basic 18HT-1002</ui5-table-cell>
        <ui5-table-cell>Very Best Screens</ui5-table-cell>
        <ui5-table-cell style="text-align: right">28 x 19 x 2.5cm</ui5-table-cell>
        <ui5-table-cell style="text-align: right">4.2KG</ui5-table-cell>
        <ui5-table-cell style="text-align: right">1570EUR</ui5-table-cell>
    </ui5-table-row>

    ...
</ui5-table>

Trace-level log

Thanks

whimboo commented 1 year ago

To access elements within a ShadowRoot you first have to find the custom element on the page. Then you can get the shadowRoot for it, and last but not least another time find element has to be used to actually get the wanted element.

Your given code doesn't do that at all. It only retrieves the body and tries to print the text which indeed is empty. Right now we do not have Find Element in ShadowRoot support with geckodriver but it will be added soon. You can wait for issue #2005 to be fixed, or use Execute Script to get to the element.

As such I'm going to close this issue.

floa93 commented 1 year ago

Thanks for the response. The example was just to show the differences of the text function, since some test frameworks are implementing their "i should see ..." test steps using the body visible text. The Javascript workaround using ExecuteScript and innerText is working fine and thanks for the link to the other issue.