I need some help in identifying button using CSS or Xpath from the HTML

Question

I am automating our website using Webdriver with Python. I am having trouble identifying and clicking the Administration button. I was trying to switch to the iFrame and select the button. It wasn't finding the button.
I have spoken to the Dev and the developer says it's not in an iFrame. The GUI is done in GWT.
I just need to work out the CSS or XPath so i can click the button.
CSS would be better as it is faster than XPath.

I have tried the following XPath: //div[@class="gwt-TabLayoutPanelTabs"]/div[last()]

It highlights the background colour of the button when i test it in the Selenium IDE using the Find button.

Does anyone know the CSS or absolute XPath please?

The HTML is as follows (Administration is the last div at the bottom):

<html style="overflow: hidden;">
<head>
<body style="margin: 0px;">
<iframe id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0;" tabindex="-1" src="javascript:''">
<html>
<head>
</head>
<body>
</html>
</iframe>
<noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif;"> Your web browser must have JavaScript enabled in order for this application to display correctly.</div> </noscript>
<script src="spinner.js" type="text/javascript">
<script type="text/javascript">
<script src="ClearCore/ClearCore.nocache.js" type="text/javascript">
<script defer="defer">
<iframe id="ClearCore" src="javascript:''" style="position: absolute; width: 0px; height: 0px; border: medium none;" tabindex="-1">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
<script type="text/javascript">
<script type="text/javascript">
</head>
<body>
</html>
</iframe>
<div style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 1px; top: 1px; right: 1px; bottom: 1px;">
<div class="gwt-TabLayoutPanel" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 30px;">
<div class="gwt-TabLayoutPanelTabs" style="position: absolute; left: 0px; right: 0px; bottom: 0px; width: 16384px;">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK gwt-TabLayoutPanelTab-selected" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTabInner">
<div class="gwt-HTML">Administration</div>
</div>
</div>

My Admin button code:

adminButton = mydriver.find_element_by_xpath('//div[@class="gwt- TabLayoutPanelTabs"]/div[last()]')
adminButton.click()

I have also tried:

mydriver.find_element_by_xpath('//div[7]/div/div').click()

Community · Accepted Answer · 2017-05-23 12:30:08Z

4

You need to locate the nested iframes and switch to them one by one before finding an element inside:

driver.switch_to.frame("__gwt_historyFrame")
driver.switch_to.frame("ClearCore")

administration = driver.find_element_by_xpath("//div[. = 'Administration']")
administration.click()

Note that I'm locating the element by text, which, I think, is more "natural" and logical.

If the "Administration" link is not inside an iframe, omit the two "switch_to" lines.

You may also need to wait for the element to become clickable:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

administration = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//div[. = 'Administration']"))
)
administration.click()

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered May 6, 2015 at 15:03

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

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

11 Comments

Riaz Ladhani Over a year ago

Thanks for the suggestion. I get the error Unable to locate frame: ClearCore. If i comment out the first line at frame "_gwt_historyFrame" Run the code, I get the following error: Unable to locate element: {"method":"xpath","selector":"//div[. = 'Administration']"}

alecxe Over a year ago

@RiazLadhani are you sure that the provided markup is actually correct? Is the site public and you can share the link to it? If not, at least, add closing iframe tags. Thanks.

Riaz Ladhani Over a year ago

The URL is not a public URL. The website is hosted on local machine in Tomcat. E.g. URL: vmtest01:8080/clearcore The iFrame html I cannot see a closed iFrame tag.

Riaz Ladhani Over a year ago

The html where the Administration div is as follows: <div class="gwt-TabLayoutPanelTabInner"> <div class="gwt-HTML">Administration</div> </div> </div> </div> </div> <div style="position: absolute; overflow: hidden; left: 0px; top: 30px; right: 0px; bottom: 0px;"> </div> </div> <div style="position: absolute; overflow: hidden; top: 1px; right: 1px; width: 30px; height: 25px;"> <div style="position: absolute; overflow: hidden; left: 0px; top: -25px; right: 0px; height: 25px;"> </div> </div> </div> <div style="display: none;" aria-hidden="true"></div> </body> </html>

Riaz Ladhani Over a year ago

Sorry I have found the iFrame closed tag. It is as follows: <iframe id="ClearCore" src="javascript:''" style="position: absolute; width: 0px; height: 0px; border: medium none;" tabindex="-1"> <!DOCTYPE html> <html> </iframe>

|

Riaz Ladhani · Accepted Answer · 2015-05-11 13:48:21Z

2

I Have finally managed to solve my issue. The dev said I had to wait for the page to have fully completed loading. The page was still loading the JavaScript functions when all the elements were displayed on the screen.
I first tried time.sleep(30) then click the button. It worked. Waiting for 30 secs every time is not efficient. I then used WebDriverWait and this is more efficient. Here is the code i used:

WebDriverWait(mydriver, 10).until(lambda d: mydriver.find_element_by_xpath("//div[. = 'Administration']").click())

answered May 11, 2015 at 13:48

Riaz Ladhani

4,05218 gold badges76 silver badges130 bronze badges

3 Comments

alecxe Over a year ago

Isn't it what I've posted as an answer? See the WebDriverWait related part.

Riaz Ladhani Over a year ago

Ah yes you have, good spot. Sorry i missed that part. I am reading too many posts to find solutions. I will mark your answer as correct. Thanks!

alecxe Over a year ago

thank you for that, hope you've solved your issue completely.

Collectives™ on Stack Overflow

I need some help in identifying button using CSS or Xpath from the HTML

2 Answers 2

11 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related