We Keep Coding

Webdriver cannot find xpath of "new loaded element"

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

Unknown dots rendered into page - what causes them?

I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show

It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.

These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.

There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">

Replace the href to something else using jQuery or javascript

This is the HTML i have and i want to change the href attribute from http://google.com to something else, please note that this link should not be changed http://google.com/home/inner_links. I cannot edit the html so looking for a solution using jQuery or Javascript. Thanks.
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>

Problems with the code fragment
First off, it is not a full document but a code fragment, as such it doesn't include appropiate headers. We can disregard this understanding that the provided code belongs to a larger document.
The following problems are present in such code fragment:
The img tags require a non-empty src attribute and a alt attribute.
The a tags require a valid url value in their href attribute.
There doens't seem to be a closing tag for <a href="http://">
And finally thig thing that doesn't make sense <li<a href="http://google.com/home/inner_links">
Now, this is beyond the question, but given that you have the following fragment:
<div class="main-menu">
<ul><li</li></ul>
</div>
We can see that you have closing li and ul tags. So I would expect that you were trying to do as follows:
<div class="main-menu">
<ul><li></li></ul>
</div>
Solution
The code I'm suggesting to use to edit the href values is the following:
$('.branding').find('img').parent().attr('href', 'newhref');
That is selecting the parents of all the img that are inside elements with class "branding", and setting the href attribute of them.
Demo with original code fragment
$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>
Demo with the code fragment and suggested fixes
$('.branding').find('img').parent().attr('href', 'newhref');
<!DOCTYPE html><head><title>demo</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<div class="branding">
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
link
<div class="main-menu">
<ul><li>link</li></ul>
</div>
</div>
Notes: In addition to the fixes, I have create a complete document from the fragment, set the title to "demo", used lorempixel for the images, set the invalid url to http://example.com and added the text "link" to the anchors to ease the demo.

jquery:
$('.branding a').attr('href', YOUR VALUE)
or
$('a[href="http://google.com"]').attr('href', YOUR VALUE)

The html at Question is invalid.
<div class="branding"> <!-- 1) where is closing tag for this `DIV` element? -->
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu"><!-- 2) where is closing tag for this `DIV` element? -->
<!-- `UL` is not permitted child of `A` element -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a -->
<ul><li</li></ul>
</div><!-- is this closing `DIV` tag for 1) or 2) ? -->
That should be changed before changing the href at the invalid html. If you cannot change html yourself, you should ask whomever supplied the html why it is delivered invalid; and ask that it be changed to valid html before proceeding.
Then adjust href of <a> elements.

jquery:
$(document).ready(function() {
$("img").parent().attr("href", some url);
});

Here a sample code- I had a similar requirement in my project.. you can change based on your need.
Note: alert() - is for demo purpose only.
$(document).ready(function(e) {
var currentUrl= $("a").attr('href');
newEditUrl = currentUrl.replace("http://google.com", "http://google.com/home/inner_links");
alert(newEditUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://">
<div class="main-menu">
<ul>
<li<a href="http://google.com/home/inner_links">
</a>
</li>
</ul>
</div>
Hope this helps.

Try something like this,
function changeHref(){
document.getElementsByTagName("a").href="Someplace.com";
}
Also, which link do you want to change specifically? Or do you want to change all of them?

Jquery tab and header conflict

My about page have three jquery tabs(I have used easy tab plugin). When I refresh the page with second tab the header portion is not showing up. and when I click the tab in a new browser tab also the header is not showing up. How can I solve this?? (Just click the second tab and refresh the page)
here my content
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>
<a href="#tabs1-html">
HTML Markup
</a>
</li>
<li class='tab'>
<a href="#tabs1-js">
Required JS
</a>
</li>
<li class='tab'>
<a href="#tabs1-css">
Example CSS
</a>
</li>
</ul>
<div class='panel-container'>
<div id="tabs1-html">
<h2>
HTML Markup for these tabs
</h2>
<p>
Dummy content
</p>
</div>
<div id="tabs1-js">
<h2>
JS for these tabs
</h2>
<p>
dummy content 2
</p>
</div>
<div id="tabs1-css">
<h2>
CSS Styles for these tabs
</h2>
<p>
dummy content 3
</p>
</div>
</div>
</div>
Here my Js
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
javascript link1
javascript link 2
Here my page link
Live page

Your code JS :
$(document).ready( function() {
$('#tab-container').easytabs();
});
is not executed.
If you execute it in the console, you will see your tabs correctly displayed.
Where have you put this code ?

Javascript many classes selection

I´ve got code:
<div class="gridContainer clearfix">
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg4 bleft">
<div class="heading">Hello!</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Title</h2>
<p>text</p>
</div>
</li>
</ul>
</div>
</div>
and I need to change text on Hello! on Title and on text. How I could select tags with multiple classes and id's? the codes:
document.getElementsByClassName('bg4 bleft heading').innerHTML="bla";
document.getElementsByClassName('description').innerHTML="bla";
doesn´t work
Thanks!

Use :
document.getElementsByClassName('accordion bg4 heading').innerHTML="bla";
You need not add same classes of a particular html element as you did, but rather use a hierarchal way like above so that you can pin-point the element you need to focus.