For all the checkboxes and radio buttons i create a locater builder:
LocatorBuilders.add('radio', function(e) {
var name = e.parentNode.parentNode.getAttribute('name');
var value = name + '_' + e.parentElement.getAttribute('value');
var result = 'radio=' + value;
return result;
});
And a locater strategy:
PageBot.prototype.locateElementByRadio = function(locatorString, inDocument, inWindow) {
var name = locatorString.split('_')[0];
var value = locatorString.split('_')[1];
var result = inDocument.querySelector('div[field=' + name +'] label[value=' + value +'] input');
return result;
}
HTML element:
<div class="radio" name="radio-example" style="">
<label class="radio-label" value="male" style="">
<input class="radio-input" style="" tabindex="1" type="radio">
<span class="option">Man</span>
</label>
</div>
This works perfect and in my selenium IDE is ee something like radio=new_yes
But when i record a click on a radio i see two commands in selenium ide. One command with the locater builder and one command with a verry long xpath that belong to the label from the checkbox. How can i record only the input field from the checkbox? and not the label ?
If you are only trying to get the locator for the radiobutton, you can use this locator
css=input.radio-input
Let me know if you have any more questions.
Related
For some reason my list is showing up disabled I am trying to use bootstrap-select here
https://developer.snapappointments.com/bootstrap-select/
This is my code that gets the items there is nothing wrong with it as 3 items exist in the view bag
public void GetStandardLookups(int LookupGroupId) {
List<SelectListItem> listItems = new List<SelectListItem>();
var items = _context.StandardLookups.Where(w => w.LookupGroup == LookupGroupId).ToList();
foreach (var item in items) {
SelectListItem listItem = new SelectListItem();
listItem.Text = item.LookupText;
listItem.Value = item.Id.ToString();
listItems.Add(listItem);
}
if(LookupGroupId == Constants.EnforcmentType)
ViewBag.EnforceMentTypesList = listItems;
if (LookupGroupId == Constants.EnforcmentCategory)
ViewBag.EnforcmentCategoryList = listItems;
}
I Create the dropdown as such after storing in the view bag on the controller action of edit. But when I look at the raw html all i have is. This is three rows of data in the database that should be pulling through and I debugged my code and it is getting three items in list Items.
Nothing selected
I am initializing my bootstrap select as follows
$(function () {
$('.selectpicker').selectpicker();
})
I am producing my drop down as follows.
#Html.DropDownListFor(x => x.Enf_Type, (IEnumerable<SelectListItem>)ViewBag.EnforceMentTypesList, String.Empty, new { #class = "selectpicker form-control" })
My Edit action
I did a test using same bootstrap-select you share with testing data, which work as expected.
its shows the words nothing to select and is disabled non clickable
Please check if the html source of dropdown-toggle button with CSS class 'disabled' like below.
<button type="button" class="btn dropdown-toggle disabled btn-light bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" data-id="Enf_Type" tabindex="-1" aria-disabled="true" title="Nothing selected"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div> </div></button>
And if rendered <select> element with disabled attribute.
<select class="selectpicker form-control" data-val="true" data-val-required="The Enf_Type field is required." disabled="disabled" id="Enf_Type" name="Enf_Type" tabindex="-98"><option value="">
You can try to programmatically enable a selectpicker with following code snippet.
$('.selectpicker').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');
i have an HTML element which is not select element. so i want to verify all the dropdown list using soft assert.
This is the code which i tried but it works only for select HTML element.
String[] exp = {"--None--","Open","Closed","Priority-Reopened","Researching","Updated","Escalated"};
WebElement dropdown = threadWebDriver.get().findElement(By.id("ddlNights"));
Select select = new Select(dropdown);
List<WebElement> options = select.getOptions();
for(WebElement we:options)
{
boolean match = false;
for (int i=0; i<exp.length(); i++){
if (we.getText().equals(exp[i]){
match = true;
}
}
Assert.assertTrue(match);
}
HTML element for this is given below:-
<a aria-required="true" class="select" aria-disabled="false" aria-describedby="2295:0-label" aria-haspopup="true" tabindex="0" role="button" title="" data-aura-rendered-by="2305:0" href="javascript:void(0);" data-interactive-lib-uid="9">Open</a>
How i can verify the list of drop down values?
I would take another approach of checking if the dropdown have any of the values specified using xpath like this.
//*[#id='ddlNights'][contains('--None--,Open,Closed,Priority-Reopened,Researching,Updated,Escalated',a)]
Screenshot:
You can check if the element exist with the above xpath. That validates true if any of the list items present otherwise it will be false. You have to handle that assertion using softAssertion.
I've seen a couple of solutions in the original webdriver that use getAttribute('xpath') and append to that '/..' but webdriver.io doesn't have an xpath attribute so I haven't been able to use that. Any ideas on how to grab the parent element?
The case I am trying to test is inside of a bootstrap layout and the element that is actually getting the class I am trying to check is one above. It looks like this:
<div class="form-group">
<input class="form-control" type="text" name="username">
<other stuff>
</div>
I am selecting by driver.element("input[name='username'"] but the error class actually hits the div
<div class="form-group error">
<input class="form-control" type="text" name="username">
<other stuff>
</div>
So I need to check if the div itself has an error class, not the input I can find (there are no uniques on the div)
Any help would be greatly appreciated.
Just searched the same and found this by inspecting Webdriver.IO source code - you can use el.$('..') to get the parent element, like this:
$('input[name="username"]').$('..') // returns the parent element
Voila! It's a part of their XPath selectors support.
I ended up solving this by using execute to get the xpath from jQuery, here is the code I used (albeit for a different test I was writing - if every label that has a * is a required field). Hopefully this is helpful to somebody in the future:
var requiredXPaths = browser.execute(function () {
var returner = [];
var $elements = $('.modal.fade.in').find("label:contains('*')");
_.each($elements, el => {
var xpath = '';
var element = el.parentElement;
for (; element && element.nodeType == 1; element = element.parentNode) {
var id = $(element.parentNode).children(element.tagName).index(element) + 1;
id > 1 ? (id = '[' + id + ']') : (id = '');
xpath = '/' + element.tagName.toLowerCase() + id + xpath;
}
returner.push(xpath);
});
return returner;
});
I got the xPath function from another stackoverflow page (How to calculate the XPath position of an element using Javascript?)
WebdriverIO actually lets you use XPath in your selectors, so any valid Xpath selector should work to find the element you want.
Alternatively, you could just use isExisting to check if the element exists on the page using the error class parent:
driver.isExisting('.error input[name="username"]');
If the element doesn't exist, then your error class didn't get added.
I've been talking about this in gitter, when the parent can be selected input[name="username"]
The parent of this element can be selected as //div[input[name="username"]]
i want to scrape a page with checkboxes with no id, they have the same name and just the values are differents.
<div class="mvNavLk">
<form class="jsExpSCCategories" method="post" name="ExpressSCCategories" action="actionTest.html">
<ul class="mvSrcLk">
<li>
<label class="mvNavSel mvNavLvl1">
First
<input type="checkbox" value="firstValue" name="selectedNavigationCategoryPath">
</label>
</li>
<li>
<label class="mvNavSel mvNavLvl1">
Second
<input type="checkbox" value="secondValue" name="selectedNavigationCategoryPath">
</label>
</li>
</ul>
</form>
</div>
use below code:
driver.find_element_by_css_selector(".mvSrcLk>li:nth-child(1)>label.mvNavSel.mvNavLvl1").click();
hope this will work.
Hope this works-
driver.FindElement(By.XPath(".//label[contains(text(),'First')]/input")).SendKeys("test");
Hi please do it like below Note this example is in java
// take check boxes with same name inside the list
List<WebElement> myCheckBox = driver.findElements(By.name("selectedNavigationCategoryPath"));
// now on the basis of index call click
myCheckBox.get(0).click(); // for the first check box
Thread.sleep(2000);
myCheckBox.get(1).click(); // for the second check box
or if you want to select on the basis of value then
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Thread.sleep(2000);
driver.findElement(By.xpath("//*[#value='secondValue']")).click(); // for the 2st one
UPDATE
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#value='firstValue']")));
driver.findElement(By.xpath("//*[#value='firstValue']")).click(); // for the 1st one
Hope this helps you
driver.findElement(By.name("selectedNavigationCategoryPath")).click();
Below Code is in C#, Collects all the Checkboxes with the name specified. Then Iterates through each ckeckbox, gets the value attribute, if the attribute is equal to your specified check box, then clicks it and comes out of the loop. Hope this should work.
IList<IWebElement> myCheckBoxs = driver.FindElements(By.name("selectedNavigationCategoryPath"));
Foreach(IWebElement chkBx in myCheckBoxs)
{
if(chkBx.GetAttribute("Value")=="Your Desired value")
{
chkBx.Click();
break;
}
}
`
Use this CSS locator.
[name='selectedNavigationCategoryPath'][value='firstValue']
I am working on a search form, where the user press the Print button, then it should create a plain html page for printing:
<a href="#" onclick="Print()" target="_blank" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-print"></span>
Print
</a>
And the Print() function (of course all the relevant data is passed):
$.get("#Url.Action("PrintData")", { ... ... ... });
This calls the appropriate controller action, which returns the correct data I am expecting with return PartialView(data);
The problem is, the new tab is not loading the PrintData.cshtml, instead it returns the original search screen.
What am I missing? Any help really appreciated.
The solution:
var url = '#Url.Action("Action", "Controller")' + '?target = "_blank"';
var data = "&projectId=" + id + "&date=" + date ...
window.open(url + data);