Jump to content

Unable to find code for an element in JavaScript

jack_

By jack_
in JavaScript

 Share

Recommended Posts

jack_ Newbie

jack_

Posted
Posted (edited)

 

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 comment
Share on other sites
jack_ Newbie

jack_

Posted
  • Author
Posted (edited)

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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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 comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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 comment
Share on other sites
jack_ Newbie

jack_

Posted
  • Author
Posted

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...