Webdriver cannot find xpath of "new loaded element" - javascript

Currently I am trying to scrape some information off the web, but I kinda ran into a dead end.
So in order to get the data I want, I need to select the right currency off of a list. I click the link to change the currency and via java script the site gets another chunk of html that contains the list and opens an overlay, where I can select the right currency.
I tried to locate the div in which the list is stored:
driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]")
I tried the list itself but I wasnt able to locate the element.
Then I wanted to see if something is found and using the following:
len(driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]"))
the answer 0 was provided, so my webdriver wasnt able to locate the newly added chunk of html.
This is the newly added html:
<div class="module">
<div class="modal_mask" style="opacity: 0.5;"/>
<div class="modal_scroller">
<div class="modal_container" style="margin-top: 164.5px;">
<div class="modal_ship" style="margin: 0px auto;">
<div class="modal_title">
Address Currency
<i onclick="modal_remove();">×</i>
</div>
<div class="modal_ship_con">
<h3>Please select your shipping destination & currency</h3>
<p>Price may differ based on your Shipping destination.</p>
<form action="#" method="get">
<input value="81" name="country_sel" type="hidden"/>
<input value="USD" name="currency_sel" type="hidden"/>
<div class="currency">
<b>Currency:</b>
<div class="currency_list">
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
<div class="currency_box" style="display: none;">
<ul>
<li sel="USD">
USD
<u>US$</u>
</li>
<li sel="EUR">
EUR
<u>€</u>
</li>
<li sel="GBP">
GBP
<u>£</u>
</li>
<li sel="AUD">
AUD
<u>AU$</u>
</li>
<li sel="CAD">
CAD
<u>CA$</u>
</li>
</ul>
</div>
</div>
</div>
<div class="submit">
<input onclick="saveShip(0);" value="Save" type="button"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And this where I have to click:
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
So now my question: is there any possibility to get to the newly added html code? Is there something like "refresh webdriver"?
Regards

I think you can simply use time.sleep() before trying to capture the button you want to click.
Just use this:
import time
time.sleep(2) #you can keep this behind the code for clicking the button
This will make selenium wait for sometime so that the code can load and then only selenium will click it
you can keep any no. of seconds instead of 2,I just kept it for an example

Related

A href through $ variable javascript/html

So I am trying to get the firebase link that the user has provided and make it a clickable link. I have this so far
<li>
<div class="collapsible-header grey lighten-4">${forum.title}</div>
<div class="collapsible-body white">
${forum.content} <br />
<p>${forum.link}</p>
</div>
</li>
I want to make forum.link clickable but don't know how to add a href before a variable.
Thanks
Can you try this:
<div class="collapsible-body white">
${forum.content} <br/>
<p>
Link Description
</p>
</div>

How to get element from another HTML page

I'm very new to tizen web. I have an app that gets data from mqtt broker and controls wi-fi lamp. I have list page with 3 pages, that allow to control brightness, speed, scale. I get data from mqtt every time when the lamp changes its state and I want to update the level in each page.
index.html
<div class="ui-content">
<ul class="ui-listview">
<li class="li-has-toggle">
<label>
On/Off
<div class="ui-toggleswitch" id="toggle">
<input class="ui-switch-input" id="t_swtch" type="checkbox" onclick="ToggleSwitch();" />
<div class="ui-switch-button"></div>
</div>
</label>
</li>
<li>
Brightness
</li>
<li>
Speed
</li>
<li>
Scalse
</li>
</ul>
</div>
brightness.html
<body>
<div class="ui-page" id="dimmer-page">
<div class="ui-content dimmer-content">
<div class="ui-dimmer" id="dimmer" data-dimmer-type="BRI"></div>
<input id="slider" data-slider-type="bri" type="range" value="50" min="0" max="100">
</div>
</div>
</body>
I tried to get element from brightness.html like this document.querySelector("input[data-slider-type='bri']") to set value, but it returns null. When I try to get access to this element of index.html document.getElementById("t_swtch") and it works fine.
I need to get access to this element from my index.html page.
Not sure it's the case, but maybe there's a typo in your query. I've tried the exact same query you use, but with the closing ) - document.querySelector("input[data-slider-type='bri']") and it returned the corresponding element

Semantic UI Step usage

I am trying to use Semantic UI Step (https://semantic-ui.com/elements/step.html) in my app, but can't figure out how to use it.
I understand the UI aspect of it, but can't figure out the following:
How can I change the <a class="active step"> whenever a user clicks on a step, and make other steps inactive?
How do I display different content in <div class="ui attached segment"> everytime a step is clicked?
How do I disable other steps while something is being processed in one of the steps?
I am new to semantic and web in general. I was thinking to use jQuery to get these components and update everything through that, but I am not sure if that's a good approach?
Can someone please suggest something with a code snippet? Thank you for your help!
This is the UI part of it from Semantic UI.
<div class="ui three top attached steps">
<a class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</a>
<a class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</a>
<a class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</a>
</div>
<div class="ui attached segment">
<p></p>
</div>
If you and an id to each step like stepShip, stepBill and stepConfirm
<a id="stepShip" class="step">
A function like this
var setStep = function(id){
$('#'+id).addClass('active').nextAll().addClass('disabled').removeClass('active');
};
Can then be called at start up like this
setStep("stepConfirm");
or attached to the steps like this
$('.step').click(function(){setStep($(this).attr('id'));})

RobotFramework/JavaScript automated tree checkbox click and icon check with various tree element id

I have dynamically generated tree html code like below:
<div class="treeDiv">
<ul id="tree" class="ztree">
(...)
<li id="tree_115" class="level2" treenode="">
<button id="tree_115_switch" class="level2 switch bottom_open" treenode_switch="" title="" type="button"></button>
<button id="tree_115_check" class="chk checkbox_false_full" onfocus="this.blur();" treenode_check="" type="button"></button>
<a id="tree_115_a" class="level2" title="myItem" style="" target="_blank" onclick="" treenode_a="">
<button id="tree_115_ico" class="ico_open" treenode_ico="" title="" type="button" style="background:url(./images/icon.png) 0 0 no-repeat;"></button>
<span id="tree_115_span">
myItem
</span>
</a>
<ul id="tree_115_ul" class="level2" style="display:block"></ul>
</li>
</ul>
</div>
And i have to automate setting true various checkboxes (in this case tree_115_check) and after that and after clicking OK button on this page and some operations, i have to check whether icon.png changed to OK.png. I have to reffer to object by its name, because before executing test i will know myItem name, but i won't know which element of the tree it will be. Do you know how to do that using RobotFramework or JavaScript? It will be simple, if i will know ID of all checkboxes, icons, etc, but how to do that when it is various and I know just, that i have to find "myItem" element of tree, its checkbox and status icon?
Thank You in advance for your support.

Javascript making submit button non functional

I am using velocity scripting for a web page.I have a hidden field that I am populating with value entered with the value entered in another field ( JS fiddle: http://jsfiddle.net/x1bdgvyt/). when I try to implement the javascript with my existing code base the submit button doesn not function anymore. IIt works fine before I plug in the JS. Clicking on it doesnt do anything. I am not sure what is wrong. Any help is much appreciated.
HTML submit button code
<div>
<ul class="action">
<li> <input class="Orange_button" type="submit" value="Start my free trial">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
<div class="column">
<li>
<span > | </span><br/>
<span > or </span><br/>
<span > | </span>
</li>
</div>
<li> <input class="green_button" type="submit" value="Buy it now">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
</ul>
</div>
Java script code
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
e.preventDefault()
});
By including e.preventDefault() you're blocking the default behavior of the button. Remove it.

Categories