Jump to content

Unable to find code for an element in JavaScript


Recommended Posts

 

I am doing a project in which I have to automatically download a file from a secured website by providing a username and password for which I am using "Selenium" with "Python 3.4.1" in Windows 7 x86_64 environment. The website is written using "JavaScript". And I don't know JavaScript.After going through the code for the webpage, so far, I have done this in Python in conjunction with Selenium webdriver:

Code:

from selenium import webdriverfrom selenium.webdriver.common.keys import Keysdriver = webdriver.Firefox()driver.get("http://www.website_name.com")

element_user_name = driver.find_element_by_id("userid")element_user_name.send_keys("user_name")element_passwd = driver.find_element_by_id("password")element_passwd.send_keys("some_passwd")elem = driver.find_element_by_id("submit")elem.send_keys(Keys.RETURN)

After this code snippet, I am successfully directed to the home screen of the website. But now, the problem arises. The code of the website contains JavaScript functions which do not contain the codes of the elements on the page which I want to manipulate. The main page contains code for user authentication, invalidate client and the likes of it.But when I right click on an element ("Inspect element") on the Home page, I get to see their respective codes in a separate window (in Firefox 32).The source code of the element which I want to use "Favorites and Dashboards" is present as:

Code:
<!DOCTYPE html><html id="ext-gen3" class=" ext-strict x-viewport" decorator="blank" webdriver="true"><head></head><body id="ext-gen4" class="ext-gecko3 cwc-view x-border-layout-ct" onload="cwc.getFrameworkWindow()"><div id="cwc_header" class=" masthead x-border-panel" style="left: 0px; top: 0px; width: 1366px; height: 27px;"></div><div id="cwcNavPanel" class=" x-panel cwc-navPanel x-border-panel" style="width: 220px; left: 0px; top: 56px;"><div id="ext-gen17" class="x-panel-bwrap"><div id="ext-gen18" class="x-panel-tbar x-panel-tbar-noheader" style="width: 220px;"></div><div id="ext-gen19" class="x-panel-body x-panel-body-noheader" style="width: 220px; height: 323px;"><div id="cwcAccordionNav" class=" x-panel x-panel-noborder" style="width: 218px;"><div id="ext-gen48" class="x-panel-bwrap"><div id="ext-gen49" class="x-panel-body x-panel-body-noheader x-panel-body-noborder" style="overflow: auto; width: 218px; height: 321px;" role="navigation"><div id="ROOT/Favorites and Dashboards" class="x-panel x-panel-noborder x-tree" style="width: auto;"><div id="ext-gen76" class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" style="cursor: pointer;" tabindex="0" role="tab" aria-expanded="true"></div><div id="ext-gen77" class="x-panel-bwrap" style="display: block; visibility: visible; position: static; left: 0px; top: 0px; z-index: auto;"><div id="ext-gen78" class="x-panel-body x-panel-body-noborder" style="width: auto; height: auto;"><ul id="ext-gen79" class="x-tree-root-ct x-tree-arrows" role="group"><div class="x-tree-root-node"><li class="x-tree-node"></li><li class="x-tree-node"></li><li class="x-tree-node"></li><li class="x-tree-node"></li><li class="x-tree-node"></li><li class="x-tree-node"></li><li id="ext-gen447" class="x-tree-node"><div id="ROOT/Favorites and Dashboards/6" class="x-tree-node-el x-unselectable x-tree-node-collapsed" unselectable="on" ext:tree-node-id="ROOT/Favorites and Dashboards/6"><span class="x-tree-node-indent"></span><img id="ext-gen94" class="x-tree-ec-icon x-tree-elbow-plus" src="/sm/default/s.gif" alt=""></img><img class="x-tree-node-icon cwc-tree-noIcon-node" unselectable="on" src="/sm/default/s.gif" alt=""></img><a id="ext-gen95" class="x-tree-node-anchor" tabindex="0" href="" role="treeitem" hidefocus="on" aria-expanded="false">

In this snippet, I want to click on "Favorites and Dashboards". Why is this code not present in the main page and how do i come to this code?Thanks for your help!

 

 

Edited by jack_
Link to post
Share on other sites

davej, I had already referred to "selenium" documentation (for Python) and found some ways to automate my project. I have sort of navigated to the webpage and am able to interact with the different elements. I would however, very much like to see some other alternative approaches to this problem.

 

Thanks for your suggestion

Edited by jack_
Link to post
Share on other sites

I see the element you need has an ID, right?

<div id="ROOT/Favorites and Dashboards/6" class="x-tree-node-el x-unselectable x-tree-node-collapsed" unselectable="on" ext:tree-node-id="ROOT/Favorites and Dashboards/6">

Are you saying you can't find that element initially on redirect? Maybe you should add a sleep to your spec until Javascript has had a chance to inject that element into the page.

Link to post
Share on other sites

The site uses ExtJS to create the elements. When you view the source code you are looking at the code sent to the browser. That does not include all of the elements, because the elements are created by ExtJS after the page is loaded. Inspecting the elements will show you the current state of the page, including anything done by Javascript. ExtJS is creating those elements dynamically after the page loads. We use Selenium to automate things with ExtJS and in general it seems to be working fine. The code that you're looking at is never sent to the browser, it is just a representation of the current state of the page after being modified by Javascript through ExtJS.

Link to post
Share on other sites

Thanks "thescientist" and "justsomeguy" for your replies (detailed explanation by justsomeguy)

 

I worked on a similar concept "thescientist" and made the automation work.

I am posting the code so that you all can use it if you so feel the need for it:

 

 

from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom selenium.webdriver import ActionChainsfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWaitimport timedriver = webdriver.Firefox()driver.get("http://website_url.com")element_user_name = driver.find_element_by_id("userid")element_user_name.send_keys("user_name")element_passwd = driver.find_element_by_id("password")element_passwd.send_keys("a_passwd")elem = driver.find_element_by_id("submit")elem.send_keys(Keys.RETURN)driver.implicitly_wait(60) # implicitly waitmenu = driver.find_element_by_id("ROOT/Favorites and Dashboards")driver.implicitly_wait(20)time.sleep(60)ActionChains(driver).move_to_element(menu).click(menu).perform() # clickprint('Finished running the scriptnn')
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...