0

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?

3 Answers3

0

You should try this

IWebElement menu = CurrentDriver.FindElement(By.CssSelector("div[class='menu-panel right']"));
cruisepandey
  • 28,520
  • 6
  • 20
  • 38
Cagdas Sancarbarlaz
  • 3
  • 4
0

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')]
Prophet
  • 32,350
  • 22
  • 54
  • 79
  • Thanks again Prophet trying to help me. I updated the description and mentioned there the "copy selector" and "copy XPath" inside of inspect. I guess youre talking about this in your answer? –  Jun 01 '21 at 13:10
  • Yes, I also updated my answer accordingly. The automatically generated locators are useless in 98% cases. You have to learn how to create correct and effective locators. There are a lot of tutorials for that – Prophet Jun 01 '21 at 13:12
  • Okay ill check out some other tutorials. In another example, ive got 4 buttons which are used to go to the next page or go to the first/last page. Here i uploaded a spectate screenshot. [https://ibb.co/xCtRtn1] As you can see, type and class are the same of those buttons. Is it possible to use the gray marked strings in the screenshot to identify a element? –  Jun 01 '21 at 13:47
  • I'm not sure about the gray strings. I case all the attributes of that elements are same you can use indexation like `(//button[contains(@class,'theClassName')])[1]` use 1 for first element etc. Also `[last()]` and `[first()]` can be used there – Prophet Jun 01 '21 at 13:52
  • Oh so in this case the only one solution is to say "use the first class" by adding [1]? But thanks, something new learned :) –  Jun 01 '21 at 13:58
  • Not exactly. This means like first element having button tag name and containing theClassName class name. Since there are several elements matching this locator we wish to get the first / second / last element in that list – Prophet Jun 01 '21 at 14:12
0

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");
cruisepandey
  • 28,520
  • 6
  • 20
  • 38
  • Thanks, yeah i figured out, thats its easier to find an element which has an placeholder or name in it. But there is one case, i struggled with before and yet couldnt find an solution. For example here in this spectate: https://ibb.co/xCtRtn1 These are 4 buttons. Each of them has another function and they control the paging. Like "go to last page" or "go to the next page". How would i identify there the element with css selector? As you can see, all 4 buttons have same type and class. –  Jun 01 '21 at 13:54
  • you did paste 2 links which are the same –  Jun 01 '21 at 14:10