We Keep Coding

How to find IDs, Names, Classes of CSS Elements with Selenium

Im struggling with the problem, that i cant really figure out, where i should look for the indentification of an specific element. In a lot examples i found in the internet, most of the elements have clear ids, names and so on.
The webpage im testing right now, has elements which have no ids or names. They have most of the time just a "type", "class" and other.
I know, that i can use "class" as the identification, but after talking with a coworker today, he suggested me, not to use class in find element as those are CSS classes which appear more than one time on the webpage.
Heres an example of a inspect of a searchfield i would like to get the identification from.
<input type="text" class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-adorned-start" placeholder="Search here" _bl_7285135c-aa68-4a79-981f-4ee1af405a95="">
I used for now this, which does work.
webDriver.FindElement(By.XPath("//input[#placeholder='Search here']")).SendKeys("Super");
But in other elements, im using "class" in XPath which i would like to change. Example of such is here:
Inspect of a text field:
<input type="text" class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-margin-normal" placeholder="Name" _bl_b3249641-8126-4e48-a3fd-9fd64aa2fb80="">
And currently im finding the element with:
IWebElement TitleField = webDriver.FindElement(By.XPath("//input[#class='mud-input-slot mud-input-root mud-input-root-text mud-input-root-margin-normal']"));
My coworker mentioned also, that i can right click in spectace on an element, click on copy and choose there either "copy selector" or "copy XPath".
But when i click on "copy XPath", ill get this:
/html/body/div[2]/div/div/div/div[1]/div[2]/div/div/input
Or for selector this:
body > div.mud-layout > div > div > div > div.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar > div.mud-input-control.mud-input-input-control.mt-0 > div > div > input
Is this something i could also use in FindElement?
What are another possible ways to identify a element in my example?

Locators automatically generated with dev tools are useless in most cases.
You have to learn how to create proper, exact, strong and efficient locators.
We mostly locating web elements with CSS Selectors or XPath.
In most cases you will have to use element tag AND some or several element attributes altogether to get an unique locator.
Very often you will have to indicate some unique parent element properties to reach that element.
So normally, in real life, element locators are looking like
//div[contains(#class,'ApplicationsView')]
or
//li[contains(#class,someClass')]//div[contains(#class,'thisClassName')]
or even like this
//div[contains(#class,'ObjectList')]//div[contains(#class,'ListItem')]/span/..//i[contains(#class,'active')]

You should try this
IWebElement menu = CurrentDriver.FindElement(By.CssSelector("div[class='menu-panel right']"));

Your first question :
Is this something i could also use in FindElement? - Yes You can. But that would be a terrible xpath since it is a absolute xpath. Tell your coworker that we should always use relative xpath.
Read here what is the difference between Absolute xpath and Relative xpath
Your next question :
What are another possible ways to identify a element in my example? - I would go with css selector.
for this HTML :
<input type="text" class="mud-input-slot mud-input-root mud-input-root-text mud-input-root-margin-normal" placeholder="Name" _bl_b3249641-8126-4e48-a3fd-9fd64aa2fb80="">
simply write css selector as :
input[placeholder='Name']
In your C# it would be something like this :
IWebElement NameField = webDriver.FindElement(By.CssSelector("input[placeholder='Name']"));
NameField.SendKeys("Your name");

IE & Edge Selenium drivers unable to find element in drop-down list

I'm trying to select an element from a drop-down menu.
On my page, the drop-down items are all spans and looks something like this:
<span class="dropdownlist" id="MyID">
<span class>Option 1</span>
<span class>Option 2</span>
<span class>Option 3</span>
<span class>Option 4</span>
Because the only identifier is the innerText (I don't want to use nth:childs). I have to use XPaths to match against which looks something like this (I escape the " marks as I'm using C#):
//*[#id=\"MyID\"]/span[text()=\"Option 1\"]
When I run this using the Chrome Driver it works perfectly fine. However, when I use the IEDriver or EdgeDriver neither of these can find the element in the list.
All my CSS selectors (and some none text driven XPaths) up until this point in my test work fine, it is simply the drop-down field that is causing my problems.
Im currently starting my IE Driver with no capabilities set, could there be an option there I should be using perhaps?
UPDATE: I've tried using a CssSelector and this returns with an error saying that the element in the list I'm trying to click is not displayed. Running a little assertion to check if the element is displayed before clicking it returns false.
UPDATE 2: I've trying running some Java Script from inside my code to assign an ID to the element and then trying to click it using that, but I'm getting the same error (again, this method works in chrome and the ID is getting assigned properly)
Here's a picture of the control:
Code involves first clicking the field which makes the drop list appear, then selecting the item from the list.
dropDownField.Click();
IWebElement listItemToSelect=
driver.FindElement(By.XPath("//span[text()=\"Bangkok\"]"));
WebDriverWait wait = new WebDriverWait(driver,
TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//span[text()=\"Bangkok\"]")));
listItemToSelect.Click();

Selenium - Discerning Between Identical <articles>, C#

I'm trying to have my program sit on a webpage and wait for specific tagName within an article to appear. Problem is, I need Selenium to check the article contains two tagNames before clicking it, that's where I'm stumped. The way I have my code setup right now, it doesn't click anywhere. It just sits on the page, I suspect because there's more than one article with the same main tagName that I'm trying to find. Here's the HTML:
<article>
<div class ="inner-article">
<a href ="/shop/shirts/iycbmgtqw/x9vdawcjg" style="height:150px;">
<img alt="Xrtqh7ar444" height="150" src="//d17ol771963kd3.cloudfront.net/120885/vi/xrTQH7Ar444.jpg" width="150">
</a>
<h1>
EXAMPLE_CODE
</h1>
<p>
EXAMPLE_COLOUR
</p>
</div>
</article>
All other items on this page have an identical class, and some have identical tagNames. I want to search for when there's a specific combination of two tagNames in an article. I realize xPath is an option, but I would like to code it before knowing an xPath, where the name of the item is the only available information.
And here's the code I'm working with at the moment:
driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromMinutes(10));
IWebElement test = driver.FindElement(By.TagName(textBox12.Text));
test.Click();
where textBox12.Text is "EXAMPLE_CODE". Am I correct in assuming that WebDriver doesn't click anything because there is more than one element with the tagName "EXAMPLE_CODE", and is there a possible way to make it first look for "EXAMPLE_CODE" and then check the secondary: "EXAMPLE_COLOUR"?
Thanks!!

You are using By.TagName incorrectly. Tag refers to the type of element you are trying to find. In this case for the link it is 'a'. Or in case of a div it is 'div'. Te correct way of finding with tagname for a link would be - By.TagName("a").
You need to match text and you will need to use xpath. Assuming that the code is unique you should try.
XPath to get the code href -- //div[class='inner-article']/h1/a[.=EXAMPLE_CODE]
XPath to get the color href -- //div[class='inner-article']/h1/a[.=EXAMPLE_CODE]/following-sibling::a

ElementNotVisibleException try to use Xpath to Enter data into a textbox with Selenium

I am using Selenium in C# to Enter data into textboxes on a webpage:
But i am getting this error:
OpenQA.Selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
I'm using #name, but there are 2 controls on the page with name="MinPrice"
heres the HTML:
<div class="form-group for-sale">
<label>Min Price</label>
<input class="form-control" name="MinPrice" min="0" placeholder="Minimum Price" value="" type="number"></input>
and this is the xpath I'm using:
txtMinPrice = Driver.Instance.FindElement(By.Name("MinPrice"));
I also tried using XPath, but similar results:
txtMinPrice = Driver.Instance.FindElement(By.XPath("//input[contains(#name,'MinPrice') and type='number']"));
If anyone has any type of idea....this is driving me nuts.

ElementNotVisibleException exception occurs when selenium can find an element in the DOM but it is not rendered on the screen.
When I have encountered this error before it has been generally caused by one of three things:
Selenium is trying to interact with an object that is present in the DOM but has not yet rendered on the screen, in which case you might consider adding some type of delay. (Avoid sleep if you can but it is useful for debugging)
The element is below the visible screen, in which case you would need to scroll to interact with it.
There is an overlapping element that is blocking the display of the element.

Add a sleep(10) in to make sure everything on the page has loaded first before any user actions are preformed. If that doesn't work also add
driver.manage().window().maximize() at the start of your test to make sure all the page elements is in view.
If that doesn't work its your xpath. Try something like //*[#class="form-group for-sale"]/input
Or use the Firefinder add on in mozilla firefox to check your xpath is valid and exists on the page.

Selenium is good at scrolling down to view an item, but when it comes to Scrolling back up it's a PiA, and usually throws that exception. I usually just do something like
element.SendKeys(Keys.Home);
Thread.Sleep(100);

How to click the DOM element in selenium webdriver thru C#

I m doing the website automation thru Selenium webdriver in Firefox. Everything is fine but I dont know how to click the radio button.
There are two radio buttons in the web (i) Family Information and (ii) Individual Information. Target information obtained in the Selenium IDE.
(i) name=indFamily
(ii) document.pebPostLogin.indFamily[1]
I can easily click the first one Family information thru following code:
driver.FindElement(By.Name("indFamily")).Click();
But dont know the C# command for the second one "Individual Information". I have recorded the actions in Selenium IDE in Firefox and exported into C# file but DOM commands are not exported in C#. Following error message seen in C# file.
// ERROR: Caught exception [Error: Dom locators are not implemented yet!]
Please find below the source code identified thru Firebug.
<input name="indFamily" tabIndex="6" onkeypress="submitOnEnter(window.event.keyCode, document.pebPostLogin)" type="radio" value="Family"/>
<input name="indFamily" tabIndex="7" onkeypress="submitOnEnter(window.event.keyCode, document.pebPostLogin)" type="radio" value="Individual"/>
Please help me out...

It has been fixed using Xpath. The code is below:
driver.FindElement(By.XPath("//input[#value='Individual']")).Click();
Thanks to Alexander and http://www.w3schools.com/xpath/xpath_syntax.asp

Try following code:
driver.FindElement(By.XPath("//input[#name='xxxx' and #value='xx']")).Click();
xxxx = element name
xx = value (for eg., yes)