Develop Reference

Select item in angular selectbox using selenium

I am trying to make a selection in a dropdown using selenium.
The selectbox is not a html type of 'select' but is using angular so it is a 'mat-select' html-tag.
I simplified my code to get this to work but could not get it to work, this is my code right now:
var q = driver.FindElement(By.TagName("mat-select"));
new SelectElement(q).SelectByText("My List Value");
When I run this code I get:
Element should have been select but was mat-select
How do I solve this? I tried using SendKeys but since "My List Value" has spaces, the space triggers the selectbox to open or close and it won't select the correct value. Then I read about SelectByText but that seems to require a normal '' but I only have a ''.
Here is the html of the select:
<div class="mat-form-field-infix">
<mat-select _ngcontent-qpv-c46="" class="mat-select ng-tns-c12-118 ng-pristine ng-valid mat-select-empty ng-star-inserted ng-touched" role="listbox" id="mat-select-5" tabindex="0" aria-labelledby="mat-form-field-label-41" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
<div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
<div class="mat-select-value">
<!---->
<span class="mat-select-placeholder ng-tns-c12-118 ng-star-inserted"> </span>
<!---->
</div>
<div class="mat-select-arrow-wrapper">
<div class="mat-select-arrow"></div>
</div>
</div>
<!---->
</mat-select>
<span class="mat-form-field-label-wrapper">
<!---->
<label class="mat-form-field-label ng-tns-c24-117 mat-empty mat-form-field-empty ng-star-inserted" id="mat-form-field-label-41" for="mat-select-5" aria-owns="mat-select-5">
<!----><!---->
<mat-label _ngcontent-qpv-c46="" class="ng-star-inserted">Properties</mat-label>
<!----><!---->
</label>
</span>
</div>
All the options are missing in the html? I know c# but not angular so this looks a bit funny to me. Have not tried to click because I don't know how to find them when I can't even see them myself.
When I click on the select all items appear in some magical angular way...

The reason you got the error is because SelectElement() can only be used with an HTML SELECT element. The mat-select (and some other elements) may be formatted to look like a dropdown but they are not SELECT dropdown elements. Because of this, we aren't going to be able to use SelectElement() but there are ways around this.
The simplest way I've found is to find the mat-select element (typically by ID) and click it to open the dropdown. Then click the desired option using an XPath that contains the expected string. The code below shows this but the second locator is a guess because the HTML you provided didn't show the dropdown options. If you update the HTML to show this, I can update and test the locator but even if you don't, this should point you in the right direction.
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementToBeClickable(By.Id("mat-select-5"))).Click();
wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//span[contains(text(),'My List Value')]"))).Click();
I added waits just to be safe. They may not be needed.
driver.FindElement(By.Id("mat-select-5")).Click();
driver.FindElement(By.XPath("//span[contains(text(),'My List Value')]")).Click();
I'm assuming you are going to use this more than once. In that case, I would write a method that takes in the desired option and selects it.
public void SelectProperty(string propertyName)
{
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementToBeClickable(By.Id("mat-select-5"))).Click();
wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//span[contains(text(),'{propertyName}')]"))).Click();
}
and call it like...
SelectProperty("My List Value");

Selenium doesn't provide methods for interacting with mat-select. You need to write a custom program for Selenium to interact with a mat-select.
Here is an example of how to select a mat-select option with Selenium using C#:
IWebElement field = driver.FindElement(By.cssSelector('mat-select'));
// Click to open the dropdown.
field.Click();
// Query for options in the DOM. These exist outside of the mat-select component.
IReadOnlyList<WebElement> options = driver.FindElements(By.cssSelector("mat-option"));
// Find the option with the text that matches the one you are looking for.
options.First(element => element.GetText() == "My List Value")
// Click it to select it.
.Click();
You will probably want to wrap this up in a re-usable method of some sort.

How to click on the radio button through the element ID attribute using Selenium and C#

I am trying to select a radio button and input element, it has an id of group and value of In_Group. There are 4 different radio buttons with the same id but different values hence I am trying to select the correct one i am looking for.
<input class="custom-radio" id="group" name="group" type="radio" value="In_Group">
I tried something like this:
driver.FindElement(By.XPath("//*[contains(#id='group' and #value='In_Group')]"))
But the element is not found could someone help me out

To locate the element you can use either of the following Locator Strategies:
CssSelector:
driver.FindElement(By.CssSelector("input#group[value='In_Group']"));
XPath:
driver.FindElement(By.XPath("//input[#id='group' and #value='In_Group']"));
However, as it is a <input> element and possibly you will interact with it ideally you have to induce WebDriverWait for the desired ElementToBeClickable() and you can use either of the following Locator Strategies:
CssSelector:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("input.custom-radio#group[value='In_Group'][name='group']"))).Click();
XPath:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//input[#id='group' and #value='In_Group'][#class='custom-radio' and #name='group']"))).Click();

How to get attribute from child node through Selenium and C#

Below mentioned is a node in a webpage and the objective is to get the data inside the attribute "onclick". I am aware that i can use GetAttribute("onclick") to get the data.
But for a reason I am only locating the td inside which this input node is present. Can someone tell if there is a way to get the attribute data "onclick" of the child 'input' node from parent 'td' node.
<td align="center">
<input type="button" class="button" value="View Pdf" onclick="showFilePreView('98374');">
</td>

If you use selenium-webdriver, then you could find the parent element first, then use childElement = parentElemnent.FindElement(By.) to find the child.
In your case, you could try the code below:
IWebElement parentElement = YourWebDriver.FindElement(By.TagName("td"));
// those codes above assume that there is only one "td" node in your case.
IWebElement childElement = parentElement.FindElement(By.Name("button"));
String theStringYouWant = childElement.GetAttribute("onclick");
Hope those code could solve your case.

The desired element is an dynamic element so to get the value of the attribute onclick i.e. showFilePreView('98374') you have to induce WebDriverWait for the element to be visible and you can use either of the following solutions:
CssSelector:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("td[align='center']>input.button[value='View Pdf']"))).GetAttribute("onclick")
XPath:
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//td[#align='center']/input[#class='button' and #value='View Pdf']"))).GetAttribute("onclick");
Note: Here the assumption is the <td> node is unique within the HTML DOM

How to extract the summary value text $39 from the html provided through Selenium

HTML is as follows:
<h3 data-testid="cartSubTotalAmt" class="inline bottom-offset-0 pull-right ng-binding">$39.00</h3>
I need to fetch the total summary value $39.00.
Kindly help me to locate and fetch the value.

As per the HTML you have shared to extract the text of the total summary value i.e. $39.00 you need to induce WebDriverWait for the desired element to be visible and you can use either of the following solutions:
CssSelector:
new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("h3[data-testid='cartSubTotalAmt']"))).GetAttribute("innerHTML");
XPath:
new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//h3[#data-testid='cartSubTotalAmt']"))).GetAttribute("innerHTML");

C# selenium unable to locate button through xpath

I'm trying to locate an element using XPath but my code is incorrect and I'm not sure of the write syntax.
I entered the code below which isn't working.
IWebElement customizeButton = driver.FindElement(By.XPath("//*[#id='container']/div/div[1]/div[1]/div[2]/button[2]"));
The HTML code for the element is below
<button class="button u-space-ls js-customize-button button--primary " data-tooltip="{"placement":"left","title":"Customize"}" data-reactid=".0.0.0.3.3"><span class="icon icon-gear" data-reactid=".0.0.0.3.3.0"></span><span class="u-small-hidden u-medium-hidden" data-reactid=".0.0.0.3.3.1"> Customize</span></button>
Can you please let me know how I should correct my code?
Thanks

If you are looking to locate the button with text as Customize as the element is JavaScript enabled element you have to induce WebDriverWait as follows :
wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
IWebElement customizeButton = wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[#class='button u-space-ls js-customize-button button--primary']//span[#class='u-small-hidden u-medium-hidden']")));