I have a dynamic table rendering where columns and rows of the table are rendered dynamically.
So here I have two sibling <td> elements in each row:
<td :key="`td3-${index}`" :id="`show_${key}`" v-show="`show_${key}`">
<input type="text" :v-model="key" :name="key" :value="entry[key]" />
</td>
<td :key="`td4-${index}`">
Edit
</td>
In the onclick event of the link in the second <td> I have to show and hide the first <td> element. Since it's dynamic I will have multiple rows. So I declared a dynamic boolean in my data to show and hide the specific <td> based on the click of another <td> in the same row.
v-show="`show_${key}`" - this is show property with dynamic key
show_firstname: false,
show_lastname: false,
show_email: false,
show_orgname: false
I created separate boolean elements for every <td> in each row.
But whenever I change the value of v-show property with the on click of second <td> element it's not making any difference. So I could not show or hide the <td>. Maybe v-show takes "`show_${key}`" as a string value not replacing true or false correctly. Can someone help me how can I achieve this?
Why don't you try organising the show_ in an object instead of a flat list of properties?
https://codesandbox.io/embed/vue-template-csncc?fontsize=14&hidenavigation=1&theme=dark
I captured the testName by using driver.find_element_by_xpath("//td[contains(.,'%s')]" % test_name)
How can I capture class name based on testName?
I am trying to click on menu-button if it contains specific test name
<tr class="row-1">
<td>testName</td>
<td>testDes</td>
<td class="menu">
<div class="menu-button">
</div>
</td>
</tr>
This is one possible XPath expression :
//tr[td[contains(.,'testName')]]/td[#class='menu']/div[#class='menu-button']
Basically the above XPath locate tr element having child td value equals "testName", then return the corresponding div[#class='menu-button'] element.
I want to get tooltip information enabling on JavaScript. I have tried with below code but its shown null every time.
Java Code:
Actions action = new Actions(driver);
WebElement element = driver.findElement(By.xpath("//*[#id='content']/div/div/div[1]/div/div[2]/div[2]/div/div[3]/div[1]/table/tbody/tr[1]/td[2]/span/div/a"));
action.moveToElement(element).build().perform();
System.out.println(driver.findElement(By.xpath("//*[#id='content']/div/div/div[1]/div/div[2]/div[2]/div/div[3]/div[1]/table/tbody/tr[1]/td[2]/span/div/a")).getAttribute("data-original-title"));
HTML Code is:
<tr class="single" name="Tasks_59c777d9-8d16-694a-7307-52caad36d751">
<td>
</td>
<td data-type="custom_task_name">
<span class="list" sfuuid="3840" data-original-title="">
<div class="ellipsis_inline" data-original-title="">
Task Testing
<br/>
Toney Harber
</div>
</span>
</td>
I have tried with span tag but this also shows null.
I am providing you 2 options try both.
Option 1
Please try below. It will return you a list. Loop through it. If there is only one span then you can get the element and then get the attribute value.
driver.findElements(By.xpath("//span[#data-original-title]"))
Option 2
Instead of
driver.findElement(By.xpath("//*[#id='content']/div/div/div[1]/div/div[2]/div[2]/div/div[3]/div[1]/table/tbody/tr[1]/td[2]/span/div/a"))
use findElements
driver.findElements(By.xpath("//*[#id='content']/div/div/div[1]/div/div[2]/div[2]/div/div[3]/div[1]/table/tbody/tr[1]/td[2]/span/div/a"))
It will return a list of web elements. Loop thorough it you might get more than one element.
How can I check the checkboxes using an id or XPath expression? Is there a method similar to select by visibletext for a dropdown?
Going through the examples given for all other related questions, I could not find a proper solution that works in a concise way that by few line or method I can check a chekbox or radio button.
A sample HTML section is below:
<tbody>
<tr>
<td>
<span class="120927">
<input id="ctl00_CM_ctl01_chkOptions_0" type="checkbox" name="ctl00$CM$ctl01$chkOptions$0"/>
<label for="ctl00_CM_ctl01_chkOptions_0">housingmoves</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="120928">
<input id="ctl00_CM_ctl01_chkOptions_1" type="checkbox" name="ctl00$CM$ctl01$chkOptions$1"/>
<label for="ctl00_CM_ctl01_chkOptions_1">Seaside & Country Homes</label>
</span>
</td>
</tr>
</tbody>
Selecting a checkbox is similar to clicking a button.
driver.findElement(By.id("idOfTheElement")).click();
will do.
However, you can also see whether the checkbox is already checked. The following snippet checks whether the checkbox is selected or not. If it is not selected, then it selects.
if ( !driver.findElement(By.id("idOfTheElement")).isSelected() )
{
driver.findElement(By.id("idOfTheElement")).click();
}
It appears that the Internet Explorer driver does not interact with everything in the same way the other drivers do and checkboxes is one of those cases.
The trick with checkboxes is to send the Space key instead of using a click (only needed on Internet Explorer), like so in C#:
if (driver.Capabilities.BrowserName.Equals(“internet explorer"))
driver.findElement(By.id("idOfTheElement").SendKeys(Keys.Space);
else
driver.findElement(By.id("idOfTheElement").Click();
If you want to click on all checkboxes at once, a method like this will do:
private void ClickAllCheckboxes()
{
foreach (IWebElement e in driver.FindElements(By.xpath("//input[#type='checkbox']")))
{
if(!e.Selected)
e.Click();
}
}
Solution for C#
try
{
IWebElement TargetElement = driver.FindElement(By.XPath(xPathVal));
if (!TargetElement.Selected)
{
TargetElement.SendKeys(Keys.Space);
}
}
catch (Exception e)
{
}
You can use the following code:
List<WebElement> checkbox = driver.findElements(By.name("vehicle"));
((WebElement) checkbox.get(0)).click();
My HTML code was as follows:
<.input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<.input type="checkbox" name="vehicle" value="Car">I have a car<br/>
To get the checkbox for 'Seaside & Country Homes', use this XPath:
//label[text()='Seaside & Country Homes']/preceding-sibling::input[#type='checkbox']
To get the checkbox for 'housingmoves', use this XPath:
//label[text()='housingmoves']/preceding-sibling::input[#type='checkbox']
The principle here is to get the label with the text you want, then get the checkbox that is before the label, since that seems to be how your HTML is laid out.
To get all checkboxes, you would start a little higher up and then work down, so that is to say get the table, and then get any checkbox within a span:
//table/descendant::span/input[#type='checkbox']
I found that sometimes JavaScript doesn't allow me to click the checkbox because was working with the element by onchange event.
And that sentence helps me to allow the problem:
driver.findElement(By.xpath(".//*[#id='theID']")).sendKeys(Keys.SPACE);
This should help -
IWebElement elementToClick = driver.findElement(By.xpath(""//input[contains(#id, 'lstCategory_0')]"));
elementToClick.Click();
You can also pass an id.
If you want something like visible text you can "find element" by name if they have names.
The below code will first get all the checkboxes present on the page, and then deselect all the checked boxes.
List<WebElement> allCheckbox = driver.findElements(By
.xpath("//input[#type='checkbox']"));
for (WebElement ele : allCheckbox) {
if (ele.isSelected()) {
ele.click();
}
}
A solution using WebDriver and C# is below. The key idea is to get the ID of the checkbox from the labels' 'for' attribute, and use that to identify the checkbox.
The code will also set the checkbox state only if it needs to be changed.
public void SetCheckboxStatus(string value, bool toCheck)
{
// Get the label containing the checkbox state
IWebElement labelElement = this.Driver.FindElement(By.XPath(string.Format("//label[.='{0}']",value)));
string checkboxId = labelElement.GetAttribute("for");
IWebElement checkbox = this.Driver.FindElement(By.Id(checkboxId));
if (toCheck != checkbox.Selected)
{
checkbox.Click();
}
}
Maybe a good starting point:
isChecked = driver.findElement((By.id("idOftheElement"))).getAttribute("name");
if(!isChecked.contains("chkOptions$1"))
{
driver.FindElement(By.Id("idOfTheElement")).Click();
}
Running this approach will in fact toggle the checkbox; .isSelected() in Java/Selenium 2 apparently always returns false (at least with the Java, Selenium, and Firefox versions I tested it with).
The selection of the proper checkbox isn't where the problem lies -- rather, it is in distinguishing correctly the initial state to needlessly avoid reclicking an already-checked box.
To select a checkbox, use the "WebElement" class.
To operate on a drop-down list, use the "Select" class.
Step 1:
The object locator supposed to be used here is XPath. So derive the XPath for those two checkboxes.
String housingmoves="//label[contains(text(),'housingmoves')]/preceding-sibling::input";
String season_country_homes="//label[contains(text(),'Seaside & Country Homes')]/preceding-sibling::input";
Step 2:
Perform a click on the checkboxes
driver.findElement(By.xpath(housingmoves)).click();
driver.findElement(By.xpath(season_country_homes)).click();
For a partial match, do the following:
getDriver().findElement(By.cssSelector("<tag name>[id*='id pattern to look for']")).click();
Here is the C# version of Scott Crowe's answer. I found that both IEDriver and ChromeDriver responded to sending a Key.Space instead of clicking on the checkbox.
if (((RemoteWebDriver)driver).Capabilities.BrowserName == "firefox")
{
// Firefox
driver.FindElement(By.Id("idOfTheElement")).Click();
}
else
{
// Chrome and Internet Explorer
driver.FindElement(By.Id("idOfTheElement")).SendKeys(Keys.Space);
}
I tried with various approaches, but nothing worked. I kept getting "Cannot click element" or ElementNotVisibleException.
I was able to find the input, but I couldn't check it. Now, I'm clicking on the div that contains the checkbox and it works with following HTML (CSS based on Bootstrap).
#foreach (var item in Model)
{
<tr>
<td>
<div id="#item.Id" class="checkbox">
<label><input type="checkbox" class="selectone" value="#item.Id"></label>
</div>
</td>
<td val="#item.Id">
#item.Detail
</td>
<td>
<div>#item.Desc
</div>
</td>
<td>
#Html.ActionLink("Edit", "Create", new { EditId = item.Id })
</td>
</tr>
}
This is the code for WebDriver:
var table = driver.FindElement(By.TagName("table"));
var tds = table.FindElements(By.TagName("td"));
var itemTds = tds.Where(t => t.Text == itemtocheck);
foreach (var td in itemTds)
{
var CheckBoxTd = tds[tds.IndexOf(td) - 1];
var val = td.GetAttribute("val");
CheckBoxTd.FindElement(By.Id(val)).Click();
}
In this approach, I give the item id as id for the div and also add an attribute for td with that id. Once I find the td of the item that needs to be checked, I can find the div before that td and click it. We can also use the XPath query that supports before (here is the example http://learn-automation.com/how-to-write-dynamic-xpath-in-selenium/).
My problem is very simple. I'm writing a Selenium test that MUST work with IE7. I have a HTML table with couple of rows and 3 columns:
Column 1 - contains a check box
Column 2 - contains a link
Column 3 - contains some free text
One (and ONLY one) of the checkboxes in the table is disabled. My task is to locate and click the link next to the disabled checkbox (on the row of the disabled checkbox). In FireFox this simple XPath expressions work fine:
//tr/td/input[#disabled]/../../td[2]/a
//tr/td/input[#disabled='disabled']/../../td[2]/a
But in IE7 the first expression clicks the top row no matter if the checkbox is enabled or disabled and the second one does not work.
Since the HTML document is very long I'm putting the important part below (as shown in FF):
<tr>
<td class="table_detail w e s center">
<input name="Delete_kG0KCgAMniwAAAEsxxgeUH0G" type="checkbox">
</td>
<td class="table_detail e s">
000000
</td>
<td class="table_detail e s">
some text
</td>
</tr>
<tr>
<td class="table_detail w e s center">
<input name="Delete_hooKCgAMi5AAAAEsFnQeUH0G" type="checkbox">
</td>
<td class="table_detail e s">
111111
</td>
<td class="table_detail e s">
</td>
</tr>
<tr>
<td class="table_detail w e s center">
<input disabled="disabled" type="checkbox">
</td>
<td class="table_detail e s">
400086
</td>
<td class="table_detail e s">
</td>
</tr>
The last link should be clicked:
400086
We use the Java Selenium API in JUnit 3 tests. The test is something like:
public void testSomething()
{
...
selenium.click("//tr/td/input[#disabled]/../../td[2]/a");
//wait to load and then test something on the page that is opened.
...
}
This works in FF but not in IE7. In IE7 it clicks the link on the first row as if disabled is ignored. It also evaluates correct in XPather (FF plugin).
I would appreciate your help.
Thanks!
You have shown the HTML in FireFox, but you haven't shown the HTML in IE, is it the same?
Based upon the information provided I would use this locator:
//tr[td/input[#disabled='disabled']]/td/a
This finds a row that has a cell that contains a disabled input element, and then locates the cell that has an achor and pinpoints the anchor.
However as I cannot see the HTML markup in IE I have no idea if this is valid or not
For the record I was able to resolve the problem by using a DOM locator. Unfortunately it looks as ugly as:
dom=function getLinkNextToDisabled()
{
var addressesTable = document.getElementsByName('AddressList')[0].getElementsByTagName('table')[0].getElementsByTagName('table')[0];
var inputs = addressesTable.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++)
{
if (inputs[i].disabled)
{
return inputs[i].parentNode.parentNode.getElementsByTagName('a')[0];
}
}
};
getLinkNextToDisabled();
Unfortunately code like this makes me sad, so I'm still open for any XPath solution that will work in IE7.
Regards!