CODEWITHSUNDEEP
pythoncssxpathselenium-webdriverwebdriver
Riaz Ladhani
Riaz Ladhani

Reputation: 4062

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

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()

Upvotes: 0

Views: 311

Answers (2)

alecxe
alecxe

Reputation: 473873

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()

Upvotes: 4

Riaz Ladhani
Riaz Ladhani

Reputation: 4062

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())

Upvotes: 2

Related Questions