How to change the style of an element using selenium - java

I have an image in my code. When I click on it, I want its style to be changed.
The field looks like this :
<a class="myField" href="#" style="left: 0%;"></a>
I can get the element by class and click on it. But I don't know how to change the style.
WebElement webelement = driver.findElement(By.className("myField"));
webelement.click();
//Change the style to 'left:40%;'
I am new to selenium. Any help appreciated.

You can do that using javascriptExecutor:
((JavascriptExecutor)driver).executeScript("document.getElementsByName('myField')[0].style.left='40%'");

Related

Using Selenium with Java, Using dynamically drag-and-drop with attribute 'draggable'

Recently I was trying to use the traditional drag-and-drop operation using 'Action' object, I tried it using it straight-forward afterwards I understood that the elements of which I want to drag are changing dynamically.
before the element looks like this:
<div data-v-a030b586 tabindex="-1" class="v-list-item theme--light">...</div>
after clicking on the element it changes to:
<div data-v-a030b586 tabindex="-1" class="v-list-item theme--light" draggable="false">...</div>
When holding the element it changes to:
<div data-v-a030b586 tabindex="-1" class="v-list-item theme--light sortable-chosen" draggable="true">...</div>
I tried to do this by using this code:
List<WebElement> elems = driver.findElements(By.cssSelector("div[class*='row']:nth-child(2) [class*='col-md']:nth-child(3) div[tabindex='-1'] div[class='v-list-item__icon icon-item-wrap'] i"));
Actions builder = new Actions(driver);
for(WebElement elem: elems){
System.out.println(elem.getText());
elem.click();
}
elems = driver.findElements(By.cssSelector("div[draggable]"));
WebElement sourceElm = elems.get(2);
WebElement destElm = elems.get(0);
builder.clickAndHold(sourceElm);
builder.clickAndHold(destElm);
builder.clickAndHold(sourceElm).moveToElement(destElm).click().release(destElm).build().perform();
But as I tried it nothing is happening. What is wrong ? or what is the correct way of doing it, if possible of course...?
**************************** EDIT *********************************
This is how the dom looks when you hold an element of if clicking on it as I described above:

Unable to locate and click checkbox ::before using Selenium Webdriver

I'm trying to click a checkbox but it's keep clicking the link 'terms and conditions'. Although my xpath (mentioned below) work on a minimized window but it's failing to click the checkbox when the window is maximized because the href (image) appears in the second line next to checkbox. Looking for some suggestions on clicking the checkbox widget on maximized window. I need to get a focus on it.
Interestingly, when i hover over the ::before (css selector) only than the widget gets highlighted.
<div class="checkbox u-mar-bot-5">
<div class="checkbox__container">
<input class="checkbox__input" type="checkbox" id="basket-contact-terms" required data-parsley-multiple="basket-contact-terms" style>
<label class="checkbox__label checkbox__label--has-link checkbox__label--small" for="basket-contact-terms" style>
::before
"I have read and agree to " <a class="text-link text-link--base text-link- small" href="/terms-conditions" target="_blank">Terms and Conditions</a>
</label>
</div>
</div>
image: Terms and Conditions
I tried a few options that keep failing to check the box and instead the link 'terms and conditions' gets the click. I must be missing something basic.
driver.findElement(By.xpath("//label[#for='basket-contact-terms']")).click();
driver.findElement(By.xpath("//label[contains(#class,'checkbox__label checkbox__label--has-link checkbox__label--small')]")).click();
I did looked around and found someone suggested to use this (below) so i tried but didn't work:
WebElement elem = driver.findElement(By.xpath("//div[contains(#class,'checkbox u-mar-bot-5')]"));
Actions action = new Actions(driver);
action.moveToElement(elem).click().build().perform();
Any suggestion would be appreciated.
Since you tried the ID of the INPUT and it threw an error that it wasn't visible, I would first try a wait to see if it will become visible. (I'm assuming it won't but it's worth a try first).
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("basket-contact-terms"))).click();
If that doesn't work, I would next try to click a different position on the element. By default, Selenium clicks on the center of the element. In your case, I think this is what's causing the issue. You can use Actions to click the upper left (1,1) of the element.
WebElement label = driver.findElement(By.xpath("//label[#for='basket-contact-terms']"));
new Actions(driver).moveToElement(label, 1, 1).click().perform();
You can try with
WebElement elem = driver.findElement(By.id("basket-contact-terms"))

How to select a nested webelement in html?

I would like to retrieve a webelement out of a nested html path using either css selectors or xpath. My specific use case is that I would like to select the i element in the following snippet:
<td class="headerActionsTd" data-rolename="Speaker">
<div class="headerActions">
<span class="addNewParticipantSection">
<i class="icon fa fa-user-plus" title="Add New"></i>
</span>
How do I obtain the i webelement for this using either css selector or xpath?
Use this xpath: //td[#data-rolename='Speaker']//div//span//i[#title='Add New'] or
css : div.headerActions i
driver.findElement(By.cssSelector("div.headerActions i"));
for multiple elements :
List<WebElement> users = driver.findElements(By.xpath("//td[#data-rolename='Speaker']//div//span//i[#title='Add New']"));
A simple one would be this :
CSS_SELECTOR
i.icon.fa.fa-user-plus[title='Add New']
Note that, if there is multiple element with this css selector, then you have this facility to differentiate between them:
:first-child
:nth-child(n)
:nth-last-child(n)
More can be found at this link
XPATH : would be :
//td[#data-rolename='Speaker']/descendant::span[#class='addNewParticipantSection']/i
Hope that helps.
Since you said data-role only changes in the comment of the other person, here is the xpath you can use
"//td[#data-role='Speaker']//i"
Or
"//td[#data-role='Speaker']/div/span/i"
Another option is that you can attempt to locate elements inside other elements. For example, you could store the addNewParticipantSection div in a WebElement, then use that WebElement's findElement method to locate the i element within it. Like so:
WebElement section = driver.findElement(By.className("addNewParticipantSection"));
WebElement icon = section.findElement(By.tagName("i"));
icon.click();

Selenium can not click on GWT tree item

I can't give access to the webapp but here is the code and HTML of the button
we = driver.findElement(By.xpath("//div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div"));
int width = we.getSize().getWidth();
action.moveToElement(we, width/2, 9).click().build().perform();
.
<div style="display: inline; background-color: rgb(255, 179, 0);" class="gwt-TreeItem gwt-TreeItem-selected" role="treeitem" id="gwt-uid-102" aria-level="9" aria-setsize="4" aria-posinset="1" aria-selected="true">
Xpath=//tagname[#attribute='value']
the above is how we should write the XPath in a code you did just give a tag name but no attribute so try to change how you give XPath
Actions action=new Actions(driver);
we = driver.findElement(By.xpath("//div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div"));
action.moveToElement(we).click().build().perform();
May be the element is not clickable when you are trying to click it. You can wait for element to become clickable and then try clicking it, as shown below:
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div")));
driver.findElement(By.xpath("//div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div")).click();
If above code does not work for you, then you can use Javascriptexecutor as a workaround, as shown below:
JavascriptExecutor e = (JavascriptExecutor)driver;
e.executeScript("arguments[0].click();", driver.findElement(By.xpath("//div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div")));
Let me know, whether above solution works for you.
When you run selenium TCs, make sure that the browser maximized. Sometimes, it may happen that elements overlap due to smaller resolution.

How can I click on this element using XPATH in WebDriver with Java?

Here is the HTML:
<li>
<input type="checkbox" checked="" name="selectedMstrPrivGroupList[9].mstrAuthorities[0].status"/>
Add Dexter
</li>
How could this element be clicked in WebDriver? It is a check box. And I want to use XPath as I have close to 30+ check boxes in the page. So that I can create a generic method and pass only the WebElement. I tried the following but didn't work.
Driver.findElement(By.xpath("//input[contains(.,'Add Dexter')]")).click();
If the checkbox next to "Add Dexter" is what you want to click on the page, you can use:
Driver.findElement(By.xpath("//li[contains(.,'Add Dexter')]//input[#type='checkbox']")).click();
What is with this one:
Driver.findElement(By.xpath("//input[#name='selectedMstrPrivGroupList[9].mstrAuthorities[0].status']")).click();
You can use like this,
driver.findElement(By.xpath("//li[contains(text(),'Add Dexter')]")).click()
You can use xpath to click on the element as below:
driver.findElement(By.xpath("//input[text()='Add Dexter']")).click();
You can also click on that element by using cssSelector instead of xpath as below:
driver.findElement(By.cssSelector("input:contains(^Add Dexter$)")).click();
Note: CssPath/CssSelector is faster than xpath. So it's better to use cssSelector than xpath in most cases.

Categories