I am trying to make a free open source script to buy shoes, exactly in this page: https://www.zalando.es/nike-sportswear-nike-waffle-one-zapatillas-summit-whitewhite-black-orange-ni112o0jj-a11.html .
I can get elements and click them as usual with driver module
driver.findElement(By.id('uc-btn-accept-banner')).click();
Error happens when I try to pick a foot size, first opening the size selector with
driver.findElement(By.id('picker-trigger')).click(); //THIS ONE WORKS.
driver.findElement(By.xpath('/html/body/div[7]/div/div[3]/div/form/div/div[1]/div/label/span')).click(); // THIS ONE DOESN'T.
I tried clicking some elements by xpath on the site and all of them are working but the foot size.
Can someone help me picking the foot size? I don't mind if it uses other method.
You are using a wrong selector there.
After opening the drop down menu you can select any size by locator like this:
//input[#name="size-picker"]/..//span[text()="39"]
It will be like this:
driver.findElement(By.id('picker-trigger')).click();
driver.findElement(By.xpath('//input[#name="size-picker"]/..//span[text()="39"]')).click();
Just update the value of desired size in the XPath expression
It it a drop down: (But we can not use Select class from Selenium since the drop down is not built using Select option tag)
Click on a drop down using this xpath :
//span[text()='Elige una talla']/..
and click like this :
driver.findElement(By.xpath("//span[text()='Elige una talla']/..")).click();
Now you would see a list of foot size :
Select them with the below xpath :
//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]
This will select 3rd item from the shown list. You have to change [3] to other number incase you would like to select different size.
driver.findElement(By.xpath("//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]")).click();
This should select 40 size
Related
Im automating something on some website and I have a dropdown menu that is customise, now the developer that developed it set the original dropdown to be hidden, it looks like this:
now I want to choose some value of the dropdown with selenium but I cant find the element since its hidden, so I want to use js to uncheck the hidden and choose a value.
this is my html block where you can see the web elements:
Remove the jcf-hidden class (or remove the class attribute completely) via "execute script".
Example in Python:
elm = driver.find_element_by_id("company_stage")
driver.execute_script("arguments[0].removeAttribute('class');", elm)
In ScalaTest, it should be:
val ele: Option[Element] = find(id("company_stage"))
executeScript("arguments[0].removeAttribute('class');", ele)
I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")
I have an unordered list that is populated dynamically from a database. What I would like to do is drag and drop the list items to reorder the list.Ideally the new position of the list item is to be saved to a field within the database. This I can do. What I need help with is the Java Script code that swaps a list item with another.
Below is the code for populating the list. As you can see the page is written in ASP.
While not rsAwards.EOF
response.write "<li>" & rsAwards("Award_Name")
%>
<a href='edit_awards.asp?Action=edit&Award_ID=<%=rsAwards("Award_ID")%>'>Edit</a>
<a class="lb" href='action_awards.asp?Action=delete&Award_ID=<%=rsAwards("Award_ID")%>'>Delete</a></li>
<%
rsAwards.MoveNext
Wend
thanks in advance.
it's super easy!! 1 line of code. just add jquery UI (you don't have to add all of it) and some javascript like this:
$("#DivContainingYourliElements").sortable({delay:300,items:".myListElement"});
this will make the elements drag and drop sortable
You just need a countaining div to call sortable on, and add a class (here its .mylistElement) to each li element you want to be sortable
see this
http://jqueryui.com/sortable/
as another demo, I used it here. just log in with username: demo password: demo
then click on the first item and you'll see training path, which is sortable
http://knowledgecity.com/tna/tnaadmin.php
by the way, the "delay" attribut is important. It specifies the different between a click and a "drag". so here in my case, you can click them, or if you click and hold for 300 miliseconds, then it will go into drag/sort mode. If they only need to sort, set the delay to 1.
I'm trying to build a screen that will be a hierarchical list of bookmarks, grouped into categories. The categories can be expanded/contracted to show or hide the bookmarks for that category. Right now I'm just working on the UI and using jquery for the first time (and loving it).
The methodology I'm using is sorta like accordion but more than one section can be opened at the same time, and there can be multiple levels deep (accordion only supports one level). For each category, there's a div with an image of a folder in it that will show or hide the next element in the DOM, which would be the collection of bookmarks (usually a <ul>). eg:
<div class="categoryLine" id="d4">
<img class="folder"....>
Fourth Menu Item
</div>
<ul id="u4">
<li id="l41">
I select the element to close using $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); where the div around the image the user clicks on has a class of categoryLine, and the thing to show/hide is the element following that div.
The problem is in the most complex (deepest hierarchy) part, some things are being hidden that shouldn't be, and reappearing for unknown reasons.
You can see a "working" example here. I've given the relevant tags IDs and put in a debugging alert to display the ID of the element clicked on and the elements to be opened and closed (view source to see this).
Click on the folder for "Fourth Menu Item" to unhide that category. You should see sub 1, sub 2, and sub 3 appear.
Click on the folder for "Fourth Menu Item sub 1". You should see sub 1 expand, but sub 2 completely disappears, including the category line. This is the mystery I'm trying to solve. Clicking on sub 1 correctly says "Toggling 'u411' from category 'd41'" but when the <ul> u411 disappears, so does all of sub 2 disappears. Likewise, if I click on the folder to expand sub2, sub3 disappears.
I am open to implementing this in a completely different way (again, this is my first jquery experiment). I would also be willing to look at solutions where only one category could be open at a time, as long as it still supported a hierarchy instead of one deep like accordion.
Thanks in advance.
jQuery describes parentsUntil() as:
Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
The important part to note there is that you're not selecting .categoryLine. It seems as though you want to be including it though. Should work if you use closest() instead.
$(this).closest('.categoryLine').next().toggle(transitionSpeed);
As a side note for future reference. ('categoryLine') is not a selector. Typically, you need to include the ., # or element type, ie div. There are more advanced methods though. You may want to read up on jQuery selectors.
I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.