I am trying to click a specific part i.e first part(19.9%) of image but its always clicking any of the value which are after 14.3%. Please check the image.[![https://i.stack.imgur.com/WoUlM.png]]
The code is:
<div class="tvimagesContainer" style="width: 80px; height: 241px;">
<canvas class="tabCanvas tab-widget" width="71" height="213" style="display: block; width: 80px; height: 237px;"></canvas>
</div>
I tried with following:
#FindBy(xpath="//*[#id='tabZoneId21']/div/div/div/div[1]/div[5]/div[1]/canvas")
WebElement wbcanvas;
Actions builder = new Actions(driver);
Action drawAction = builder.moveToElement(wbcanvas, 213/12,10).//
.click()
.build();
drawAction.perform();
In place of 213/12,10 put different values and tried but its clicking every time on the middle part of image.
Any help will be appreciated.
Please try it like following, this will click the one above of the middle. You can change the value(213/12). If you want to click below fields then you need to change y to value below 0 :
Actions actions = new Actions(driver);
actions.moveToElement(wbcanvas).moveByOffset(0, (213/12)).click().build();
actions.perform();
Related
[https://i.stack.imgur.com/yKOOF.png]I have to click one of options from left widget (See the Image1.PNG) will display single row as shown in ( See the [https://i.stack.imgur.com/hBNTN.png]Image.PNG) and then mousehover on each and every value and have to capture the tooltip for each values of that particular row..
xpath for the left and right widgets are:
#FindBy(xpath="//*[#id='tabZoneId21']/div/div/div/div[1]/div[5]/div[1]/canvas")
WebElement wbcanvasWidgetLeft;
#FindBy(xpath="//*[#id=\"view5159778620503418402_17231458509407196328\"]/div[1]/div[2]/canvas[2]")
WebElement wbcanvasWidgetRight;
And when I mouse hover on each and every value the following code gets highlights and only the value of ‘left’ gets change otherwise its static for all options.
[![<div class = “ tab-tooltip tab-widget tab-tooltipAR” style=”user-select: none; -webkit-tap-highlight-color: transparent; top: 1px; **left:119px**;”>… </div>
<div class=”tab-tooltipContainer”>
<div class =”tab-tooltipContent” wairole=”alert” style>
<div class=”tab-ubertip tab-widget” style=”min-width: 368px;”>.
<div class =”tab-ubertipContent”>
<div class=”tab-ubertipTooltip”>
<span style =”white-space:pre-wrap;tab-size:10;-moz-tab-size:10”>
<div style=”text-align:left;”>
<span style=””>Health Group </span>
</div>
<table style=”vertical-align:top;padding:0px” cellspacing=”0”>
<tbody>
<tr>
<td style =”white-space:pre”>
span style=”font-family” >97</span>
</td>
<td >
<span style=”font-” >Minimum</span>
</td>][1]][1]
Only the value of ‘left’ gets change for each options with some specific margin.
I have tried with following code which mousehover either 87.7% or 30.2% and displays the tooltip. I am not able mousehover on the first option that is 19.9% and so on in continuous manner.
public void sikuli() throws FindFailed, Exception {
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='data visualization']")));
try{
//Captured image of first option(Health) and clicked on in it
Screen s = new Screen();
Pattern target = new Pattern("Health.PNG");
s.wait(target,20);
s.mouseMove(target);
s.click();
Actions act = new Actions(driver);
act.moveToElement(wbcanvasWidgetLeft).moveByOffset(-50,0).moveToElement(wbcanvasWidgetRight).build().perform();
//Capturing Tooltip
System.out.println(driver.findElement(By.xpath("//div[#class='tab-ubertipTooltip']/span/div[3]/span[1]")).getText());
System.out.println(driver.findElement(By.xpath("//div[#class='tab-ubertipTooltip']/span/div[4]/span")).getText());
}
catch(Exception e)
{
e.printStackTrace();
}
driver.switchTo().defaultContent();
}
Can I use javascript executor with help of style attribute where I set the margin values for ‘left’ but i don't know how to set margin for style attribute while writing xpath.
Any help will be appreciated.
I'm trying to automate a functionality using selenium in my Application Chrome browser. It's an SVG graph based page and shows details upon mouse over it. And this is identifiable with a CSS selector which is returning more than one matching elements(i.e. 6-7 dl , these dls has few child tags then internally containing the values I need to verify -as attached), now my need to select them one by one at a time and verify text of them(which displayed on mouse over).
I got to know on google how to read nth-child from dl but not getting a way to select particular dl at first place.
For example-
my selector is: .d3-tip.n>dl
if I use -.d3-tip.n>dl>dt:nth-child(odd): its giving me all the attributes of dt.. ie 6 values but I nedd values only from fst dl.
Similarly.d3-tip.n>dl>dd:nth-child(even) returning the 6 values of respected dds..
In Actual my app has only one dl (on UI) but don't know why it displaying 6 in DOM...
Plz refer attachment and HTML for a clear understanding of DOM
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<--! and so on up to 6 blocks of dl
nth-child is to find the nth-child of any immediate parent element. In your HTML DOM, dd is single child element of each div.d3-tip element. The repetitive child is actually your div.d3tip for it immediate parent element
So your selector has to be written as below to get the first set of dd,
div.d3-tip:nth-child(1)>dl>dd
Getting the second selector also works. This is most important while writing css selector. The second nth has to work. :).
Ok, so I am not sure which of the elements you want...
So... here is a snip that should give you help.
A) with hovering.
B) with looping through the elements.
C) Bonus learn about contains() functionality of XPath...
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.action_chains import ActionChains
url = "http://your_url"
path_to_chromedriver = "C:\path_to_chromedriver"
chrome_options = Options()
#chrome_options.add_argument("--headless")
chrome_options.add_argument("--start-maximized")
browser = webdriver.Chrome(executable_path=path_to_chromedriver,
chrome_options=chrome_options)
browser.get(url)
# list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dt")
list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[class='d3-tip n']//dl/dt")
list_of_dd_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dd")
hover = ActionChains(browser).move_to_element(list_of_dt_elements_to_hover[0])
hover.perform()
for dd_ele in list_of_dt_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
for dd_ele in list_of_dd_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
I hope you find this helpful!
Following is the html
<div id="form1:customertype" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-state-hover" style="width: 165px;">
<div class="ui-helper-hidden-accessible">
<select id="form1:customertype_input" name="form1:customertype_input" tabindex="-1">
<option value="S">Staff</option>
<option value="C">Customer</option>
<option value="N">New To Bank</option></select></div>
<div class="ui-helper-hidden-accessible"><input id="form1:customertype_focus" name="form1:customertype_focus" type="text" readonly="readonly"></div>
<label id="form1:customertype_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 149px;">Staff</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right ui-state-hover"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span></div></div>
The stylesheet of class="ui-helper-hidden-accessible" is
ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 0px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 0px;
}
Following is my code
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
Select select = new Select(customerType);
select.selectByVisibleText("New To Bank");
When I try to select "New to Bank" from the dropdown I get exception
element not visible: Element is not currently visible and may not be manipulated - Selenium webdriver
I have tried WebDriverWait technique but of no use, any ideas ?
I don't believe the text for that option is actually visible before you attempt to select it. Try selecting by value instead.
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
Select select = new Select(customerType);
select.selectByValue("N");
You may need to actually click the selector before being able to select an option, though.
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
new WebDriverWait(driver, 15).until(
ExpectedConditions.elementToBeClickable(customerType));
customerType.click();
Select select = new Select(customerType);
select.selectByValue("N");
try performing click on customerType before you create object of Select
Well, I found a work around to solve my problem but I am not happy with this. anyways what I did is focused on the div element that controls the dropdown by clicking it and and then sending down arrows keys twice followed by enter key. This selects my desired option. I used the following method
driver.switchTo().activeElement()
I also had the same problem and after hours I realized the browser was trying to click in a element before the page load.
So I create a sleep to solved the problem:
sleep(1)
P.S. - This is a solution that I really don't like.
I'm just pointing you the reason for that.
The best you can do is to check the page that you have the problem and try to optimize the load time.
I encounter the same problem. I have tried many methods.
Finally, the following python code solved the error.
I use javascript code to make the element visible before selecting the option.
css = 'select#state' # css selector of the element
js = """const data_options = Array.from(document.querySelectorAll('{css}'));
data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css)
self.driver.execute_script(js)
Maybe it's helpful for you!
How can text of a web element be set using java script executor? Or is there any other way to do this?
<a class="selectBox selectBox-dropdown selectBox-menuShowing selectBox-active" style="width: 52px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 13px;">10</span>
<span class="selectBox-arrow"/>
</a>
There are two span elements under the tag - which is a drop down. User clicks on span[2] and a list is shown which contains data like 10, 20, 30, 40, etc.. User clicks on the number(element) and that is set as the text of span[1] (In this case, 10 is selected). How should I go about solving this?
I tried Action builder and it is not working. Any others suggestions?
If you want to change the text of span[1] directly, you may use following code:
String jScript = "var myList = document.getElementsByClassName(\"selectBox-label\");"
+"myList[0].innerHTML=\"YourNumber\";";
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript(jScript);
However, you may also click the number using java script which as you say will set the text of span[1]. Example below:
WebElement element = driver.findElement(By.xpath("YourNumbersXpath"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);
I am trying to find a way to display the checkbox and some text to the right properly. The default way the MVC View lays them out puts the checkbox below the label / text. So I tried to get them on the same line with this simplified code, but the text still rides up about half a line above the checkbox. How can you display a checkbox and some text to the right of the checkbox on the same line with proper vertical alignment for the text on the right? Thank you!
<div>
#Html.EditorFor(model => model.DriverDBARequired) Driver DBA Required
</div>
This must be a CSS issue. The standard site.css might cause that behavior:
label {
**display: block;**
font-size: 1.2em;
font-weight: 600;
}
If you change it to
display: inline
it should work. The following lines in the standard site.css can help you too:
label.checkbox {
display: inline;
}
Write your checkbox like something as:
<label class="checkbox">#Html.CheckBox("MyName", false) My text</label>