I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.
Related
Unable to upload the image.After click on the "add photo" button browser popup displayed. But its not taking the path of the file and not clicking the open button.
WebElement uploadElement=ep.Addphoto();
uploadElement.click();
uploadElement.sendKeys("Path_of_the_image");
driver.findElement(By.xpath("//input[#id='profile_pic']")).sendKeys("absolute-path-of-image-file")
Can you please try the above code ?
No need to click on the element. Directly use the above code to sendKeys to the input element.
The issue is that the element is present in the dom structure but not visible on the UI. As you can see in your DOM which is as follows:
<label class="d-flex flex-column cursor-pointer justify-content-center profile-photo garage-photos grey-bg" xpath="1">
<i class="material-icons large-font text-muted">photo_camera</i>
<p class="mb-0">Add Photo</p> <p class="mb-0">(optional) </p>
<input class=" display-none " type="file" name="profile_pic" id="profile_pic" accept="image/*">
</label>
The input class has display-none
I'm trying to run some Selenium tests in Java but some fields are being blocked by another one and aren't clickable. The problem is, that other field doesn't actually exist in the page source.
The error is: Element <select id="pets" class="sumo form-control SumoUnder" name="pets"> is not clickable at point (1025.833351135254,677.4000244140625) because another element <span> obscures it
There is no element that doesn't have other tags (id, class, etc.) with it. So what is this mysterious field?
Interestingly, if I try to access some other fields first, I get different obscuring fields, which ALSO don't exist on the page. Such as:
<p class="CaptionCont SelectBox">
Watching the test interactively doesn't help; there's nothing visible that's blocking the elements when the error's thrown.
Where are these phantom fields coming from, and how do I stop them from blocking my fields?
EDIT: I have found that these fields are being added by SumoSelect. They don't show up when you view the source of the page, but they're there if you save the page and open it locally.
<div class="col form-group">
<label for="pets">Pets</label>
<div class="SumoSelect sumo_pets" tabindex="0" role="button" aria-expanded="false">
<select id="pets" name="pets" class="sumo form-control SumoUnder" tabindex="-1">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="CaptionCont SelectBox" title="Select">
<span class="placeholder">Select</span>
<label><i></i></label>
</p>
<div class="optWrapper">
<ul class="options">
<li class="opt"><label>Select</label></li>
<li class="opt"><label>1</label></li>
<li class="opt"><label>2</label></li>
<li class="opt"><label>3</label></li>
</ul>
</div>
</div>
</div>
if not clickable, may be selectable.
Select pets = new Select(driver.findElement(By.id("pets")));
pets.selectByIndex(1);
When you are using a JS library to enhance the Select - you need to see the final DOM created by the JS library. In the case of SumoSelect - the CSS for the select box itself is:
<p class="CaptionCont SelectBox" title=" Volvo">
<span> Volvo</span>
<label><i></i></label>
</p>
See the span there? If you want to click the dropdown - you need to click that span.
Try to click using JavaScript Executor.
Reference Link:- http://learn-automation.com/click-in-selenium-webdriver-using-java-script/
I have a small doubt over here on selecting one of the value from the drop down using selenium . When i generated a code using selenium-IDE it gave me a set of codes for selecting from the drop-down .
Code is as follows-->
driver.findElement(By.cssSelector("input.search")).click();
driver.findElement(By.xpath("//table[#id='project-add-table']/tbody/tr[4]/td[3]/div/div[2]/div[3]")).click();
new Select(driver.findElement(By.cssSelector("select"))).selectByVisibleText("Test");
So can anybody tell what is the use of that second line of code ?After clicking to the dropdown why cant we directly select the required element?
HTML -->
<td class="environmentTd" required="">
<div class="ui fluid search dropdown env selection">
<select>
<option value="SB">Sandbox</option>
<option value="DEV">Development</option>
<option value="QA">Test</option>
<option value="PROD">Production</option>
<option value="PP">Pre Production</option>
<option value="UAT">UAT</option>
<option value="DR">DR</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text">Sandbox</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item active selected" data-value="SB">Sandbox</div>
<div class="item" data-value="DEV">Development</div>
<div class="item" data-value="QA">Test</div>
<div class="item" data-value="PROD">Production</div>
<div class="item" data-value="PP">Pre Production</div>
<div class="item" data-value="UAT">UAT</div>
<div class="item" data-value="DR">DR</div>
</div>
</div>
</td>
If your select tag is visible in DOM without you clicking the dropdown, just use the third line
Select select = new Select(driver.findElement(By.cssSelector("select")));
select.selectByValue("QA");
Otherwise, click on the dropdown which will probably generate the DIV with class
class="menu transition hidden"
and then you can use the select line.
U don't really need to click on dropdown. U need to find dropdown as WebElement, convert it to SelectElement and use it's class method to select option.
I assume, that in provided code you click on dropdown, then click on opened fields with options. But I think it's a lot of unnecessary actions. Unless you have any scripts, triggered by that clicks, which must be tested.
From your description it sounds like the SELECT element isn't visible until the 2nd click happens. It's also possible that the 2nd click creates the SELECT element via Javascript. You could investigate this by using the Chrome devtools and search for the SELECT element before the 2nd click happens. See if it exists or maybe exists but is not visible. Then click on the 2nd element and see how the HTML changes. Without access to the site, that's about as good an explanation as we can provide. It's not something I would worry about. It's just the way the site is designed.
I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/
How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]