Selenium with combo box control and select element - c#

The product which I am trying to automate has a customized combo box control from .Net.
The control is of type <input> and I will be able to type n search with the starting letter only.
When I try to access the <select> element using WebDriver , it says that the operation cannot be performed on an <input> field.
When i try to do a .Sendkeys on the iWebElement it will only be able to select values with starting text.
Is there any way to use WebDriver to select the combo box value using the whole text?
Sample DOM is in below format
<input name="icombobox_Text" tabIndex="7" title="Click to select theValue" class="ComboBox_Normal TxtBox_Css" id="icombobox_Text" accessKey="L" onkeydown="return C28.KeyDown();" onkeyup="return C28.KeyUp();" onkeypress="return C28.KeyPress();" onclick="$_('C28','TextClick')" onfocus="$_('C28','Focus')" onblur="$_('C28','Blur')" onselectstart="$_('C28','SelectStart')" onpaste="return false" oncontextmenu="return C28.KeyRightClick()" type="text" maxLength="255" maxSize="10" minSize="5" AUTOCOMPLETE="off"/>
There are 4 items in the combo..How to select a particular value.?

I got the answer.
Concept:
The Combo Control is having Text Box + List (Drop Down image).
So first find the element of the drop down image by clicking it.
Then use “SelectElement” Class to select the value from the list.
Sample Code:
IWebElement iWebelement = driver.FindElement(By.Id("combobox_Text")); //Getting the element of the Text Box
IWebElement iWebelementList = driver.FindElement(By.Id("combobox_List")); //Getting the elements of List/Drop down Box
SelectElement selected = new SelectElement(iWebelementList); //Parsing the list
iWebelement.SendKeys(Keys.ArrowDown); // Clicking the drop down image
selected.SelectByText("January"); // Use select element class to select the value

Use the following below code, to select an Option from Drop Down:
IWebElement iwe = Driver.FindElement(By.XPath("//li[contains(#class,'..item...') and contains(text(),'"+text+"')]"));
Thread.Sleep(500);
Actions action = new Actions(Driver);
Thread.Sleep(500);
action.MoveToElement(iwe).Click().Perform();

Related

error: 'Element should have been select but is a ng-select' clicking on a ng-select dropdown option using selenium c#

Using selenium c# - I am unable to click on a value of an angular dropdown list.
code:
new SelectElement(driver.FindElement(By.Name("Status"))).SelectByIndex(2)
error: 'Element should have been select but is a ng-select'.
I also tried clicking on the dropdown first then targeting the values after dropdown list shows. I got 'Element should have been select but is a div'
Any Ideas on the latest way to use selenium c# for selecting values of ng select, ng options select dropdowns, would be appreciated.
This error message...
Element should have been select but is a ng-select
...implies that the element is a angular-ngselect element so you can't use the Select Class.
As the desired element is an angular-ngselect element so to Click() on the second option from the angular dropdown list you have to induce WebDriverWait for the ElementToBeClickable() and you can use either of the following Locator Strategies:
CssSelector:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("ng-dropdown-panel[aria-label='Options list']"))).Click();
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("ng-dropdown-panel[aria-label='Options list'] div.ng-option.ng-star-inserted[id$='2']"))).Click();
XPath:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//ng-dropdown-panel[#aria-label='Options list']"))).Click();
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//ng-dropdown-panel[#aria-label='Options list']//div[contains(#class, 'ng-option ng-star-inserted') and contains(#id, '2')]"))).Click();
You can try to click on drop down bar like this :
driver.FindElement(By.Name("Status")).Click();
and after that you should see all the options. Now I see you are still using select class to select the option, which will not work out since HTML is not built up using Select and options tag.
Now try to click directly :-
driver.FindElement(By.Xpath("xpath of the option should go here")).Click();
Also, I would suggest to give few seconds sleep before selecting the option.

Select from tag type - input dropdown with selenium C# webdriver

How can i get element from below dropdwon, i have used Select command to select dropdowns, but here type is input.
<input class="tp-select-input" autocapitalize="none" autocorrect="off" autocomplete="off" spellcheck="false" data-testid="register-country" value="">
As dropdown you want to select value from is not a select type tag, Selenium Select method wont work on it. You have to follow below steps:
Click on Dropdown / or Arrow
Locate webelement you want to select from dropdown
Use java script executioner to click the option you want to select
Since you have not given complete HTML, below is the dummy code:
driver.FindElement(By.XPath("//input[#data-testid='register-country']")).Click() // Click on dropdown
IJavaScriptExecutor executor = (IJavaScriptExecutor)driver;
executor.ExecuteScript("arguments[0].click();", driver.FindElement(By.XPath("//*[text()='Austria']"))); //You can give more accurate xpath for country you want to select based on other HTML attributes
You can also try with below code
IWebElement element = driver.FindElement(By.ClassName("tp-select-input")); driver.FindElement(By.XPath("//span[text()='Australia']")); element.SendKeys(OpenQA.Selenium.Keys.Down); element.SendKeys(OpenQA.Selenium.Keys.Return);

Selenium testing with FlatPickr

I am trying to write functional tests for a Vue form that benefits from the FlatPickr date control. When I click on the element, it shows an additional element and from this the calendar appears. I'm struggling to select the input to activate the drop down.
<flat-pickr id="DateOfBirth" v-model="request.name.dateofbirth" :config="config" class="form-control" placeholder="Select date" name="date" size="sm" aria-label="Your date of birth">
</flat-pickr>
I don't really care what date is selected and so far I have tried this to just select the 3rd day/date but the calendar doesn't show:
var datePickr = webDriver.FindElement(By.XPath("//input[#placeholder='Select date']"));
var jsExecutor = (IJavaScriptExecutor)webDriver;
jsExecutor.ExecuteScript("arguments[0].setAttribute(arguments[1], arguments[2]);", datePickr, "readonly", "");
datePickr.Click();
var days = webDriver.FindElements(By.ClassName("flatpickr-day "));
days[3].Click();
The objective is to find the element, click it, select any date.
NB: if I try
var datePickr = webDriver.FindElement(By.Id("DateOfBirth"));
Then the expression fails as this element is hidden when rendered and something else triggers it (hidden by FlatPickr, not my code).
Any ideas? Thanks

Using Selenium, how to click a radio button based on associated label

I'm using Selenium in C#, and I need to be able to specify which radio button on a website to click based on the text of the label that is associated with that radio button. I need to be able to pass that text in as a parameter. Here is a sample of what the code for the radio buttons looks like (this is for three buttons):
<input id="radSelect152_222_1369" class="bgRadioNotChecked" type="radio" onclick="BGQ.Ajax.SelectAnswer(this, '152','1369','3', '547');" value="1369" onfocus="BGQ.View.setLastElement(true);" name="radSelect152_222">
<label class="inline" for="radSelect152_222_1369">Watermelon</label>
<input id="radSelect152_222_1370" class="bgRadioNotChecked" type="radio" onclick="BGQ.Ajax.SelectAnswer(this, '152','1370','3', '547');" value="1370" onfocus="BGQ.View.setLastElement(true);" name="radSelect152_222">
<label class="inline" for="radSelect152_222_1370">Papaya</label>
<input id="radSelect152_222_1371" class="bgRadioNotChecked" type="radio" onclick="BGQ.Ajax.SelectAnswer(this, '152','1371','3', '547');" value="1371" onfocus="BGQ.View.setLastElement(true);" name="radSelect152_222">
<label class="inline" for="radSelect152_222_1371">Mango</label>
I want to be able to specify "Mango" in an Excel input file (I have all the file input stuff working fine) and have Selenium click the associated radio button. One approach that I read that I've been trying is to do the following:
Find the element that has the target text ("Mango") as its text
Get the FOR attribute from that element
Find the input that has an id equal to that FOR attribute
Click that input element.
Problem is, I'm pretty new to Selenium and can't quite figure the syntax for how to do these four steps. Can someone show me the way, with specific code examples? Also, or alternatively, is there a better/smarter way to do this? If so, please be specific.
I've included here the method I've started to write, in which I pass in the target text. I know it's wrong (especially in the By.XPath part).
public void ClickRadioButtonByLabelText(string labelText)
{
// (1) Find the element that has the label text as its text
IWebElement labelForButton = commondriver.FindElement(By.XPath(//label[text()='labelText']));
// (2) Get the FOR attribute from that element
string forAttribute
// (3) Find the input that has an id equal to that FOR attribute
// (4) Click that input element
}
Thanks.
You have two options.
Option 1 - do it all within a single XPath query
The XPath query would be:
//input[#id=//label[text()='TestCheckBox']/#for]
That is, get input that has an id which comes from the for attribute from a label that has the text of "TestCheckBox"
Option 2 - get the attribute from the label and then find the element in seperate steps
public void ClickRadioButtonByLabelText(string labelText)
{
// (1) Find the element that has the label text as its text
IWebElement labelForButton = commondriver.FindElement(By.XPath("//label[text()='labelText']"));
// (2) Get the FOR attribute from that element
string forAttribute = labelForButton.GetAttribute("for");
// (3) Find the input that has an id equal to that FOR attribute
IWebElement radioElement = commondriver.FindElement(By.Id(forAttribute));
// (4) Click that input element
radioElement.Click();
}

Trying to click radio button option by name/value in Selenium using C#

I'm new to Selenium and am able to select a value from a drop down list but can't seem to do it for a radio button. Here's the code I use for the drop down list:
public void SelectValueById(string element, string text) {
//Get hold of the dropdown box by Name
IWebElement dropDown = commondriver.FindElement(By.Id(element));
//Place the drop down into selectElement
SelectElement clickThisitem = new SelectElement(dropDown);
//Select the Item from dropdown by Text
clickThisitem.SelectByText(text);
}
This works fine. I'd like to do the same thing with a radio button. I want to pass in the same two parameters--radio button id or xpath, and the name/value of the option to select--and have the function click the correct option.
A radio button is not considered a <select> element. it is a <input> element with the attribute type='radio'. Checking and Clicking are both sufficient. (clicking moreso sometimes due to ajax binds, etc)
IWebElement radio = commondriver.FindElement(By.Id(element));
radio.click(); // this will work
radio.check(); // so will this.

Categories

Resources