Skip to content

Commit 5a80353

Browse files
pallavigitworkpallavigitwork
authored
added content for the locator (SeleniumHQ#1350)
[deploy site]
1 parent 95ec90a commit 5a80353

File tree

4 files changed

+1192
-12
lines changed

4 files changed

+1192
-12
lines changed

‎website_and_docs/content/documentation/webdriver/elements/locators.en.md

+298-3
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,304 @@ Selenium provides support for these 8 traditional location strategies in WebDriv
3131
| tag name | Locates elements whose tag name matches the search value |
3232
| xpath | Locates elements matching an XPath expression |
3333

34-
{{< alert-code >}}
35-
of selecting elements using each locator strategy
36-
{{< /alert-code >}}
34+
## Creating Locators
35+
36+
To work on a web element using Selenium, we need to first locate it on the web page.
37+
Selenium provides us above mentioned ways, using which we can locate element on the
38+
page. To understand and create locator we will use the following HTML snippet.
39+
40+
```html
41+
<html>
42+
<body>
43+
<style>
44+
.information {
45+
background-color: white;
46+
color: black;
47+
padding: 10px;
48+
}
49+
</style>
50+
<h2>Contact Selenium</h2>
51+
52+
<form action="/action_page.php">
53+
<input type="radio" name="gender" value="m" />Male &nbsp;
54+
<input type="radio" name="gender" value="f" />Female <br>
55+
<br>
56+
<label for="fname">First name:</label><br>
57+
<input class="information" type="text" id="fname" name="fname" value="Jane"><br><br>
58+
<label for="lname">Last name:</label><br>
59+
<input class="information" type="text" id="lname" name="lname" value="Doe"><br><br>
60+
<label for="newsletter">Newsletter:</label>
61+
<input type="checkbox" name="newsletter" value="1" /><br><br>
62+
<input type="submit" value="Submit">
63+
</form>
64+
65+
<p>To know more about Selenium, visit the official page
66+
<a href ="www.selenium.dev">Selenium Official Page</a>
67+
</p>
68+
69+
</body>
70+
</html>
71+
```
72+
73+
## class name
74+
The HTML page web element can have attribute class. We can see an example in the
75+
above shown HTML snippet. We can identify these elements using the class name locator
76+
available in Selenium.
77+
{{< tabpane langEqualsHeader=true >}}
78+
{{< tab header="Java" >}}
79+
WebDriver driver = new ChromeDriver();
80+
driver.findElement(By.className("information"));
81+
{{< /tab >}}
82+
{{< tab header="Python" >}}
83+
driver = webdriver.Chrome()
84+
driver.find_element(By.CLASS_NAME, "information")
85+
{{< /tab >}}
86+
{{< tab header="CSharp" >}}
87+
var driver = new ChromeDriver();
88+
driver.FindElement(By.ClassName("information"));
89+
{{< /tab >}}
90+
{{< tab header="Ruby" >}}
91+
driver = Selenium::WebDriver.for :chrome
92+
driver.find_element(class: 'information')
93+
{{< /tab >}}
94+
{{< tab header="JavaScript" >}}
95+
let driver = await new Builder().forBrowser('chrome').build();
96+
const loc = await driver.findElement(By.className('information'));
97+
{{< /tab >}}
98+
{{< tab header="Kotlin" >}}
99+
val driver = ChromeDriver()
100+
val loc: WebElement = driver.findElement(By.className("information"))
101+
{{< /tab >}}
102+
{{< /tabpane >}}
103+
104+
## css selector
105+
CSS is the language used to style HTML pages. We can use css selector locator strategy
106+
to identify the element on the page. If the element has an id, we create the locator
107+
as css = #id. Otherwise the format we follow is css =[attribute=value] .
108+
Let us see an example from above HTML snippet. We will create locator for First Name
109+
textbox, using css.
110+
111+
{{< tabpane langEqualsHeader=true >}}
112+
{{< tab header="Java" >}}
113+
WebDriver driver = new ChromeDriver();
114+
driver.findElement(By.cssSelector("#fname"));
115+
{{< /tab >}}
116+
{{< tab header="Python" >}}
117+
driver = webdriver.Chrome()
118+
driver.find_element(By.CSS_SELECTOR, "#fname")
119+
{{< /tab >}}
120+
{{< tab header="CSharp" >}}
121+
var driver = new ChromeDriver();
122+
driver.FindElement(By.CssSelector("#fname"));
123+
{{< /tab >}}
124+
{{< tab header="Ruby" >}}
125+
driver = Selenium::WebDriver.for :chrome
126+
driver.find_element(css: '#fname')
127+
{{< /tab >}}
128+
{{< tab header="JavaScript" >}}
129+
let driver = await new Builder().forBrowser('chrome').build();
130+
const loc = await driver.findElement(By.css('#fname'));
131+
{{< /tab >}}
132+
{{< tab header="Kotlin" >}}
133+
val driver = ChromeDriver()
134+
val loc: WebElement = driver.findElement(By.css("#fname"))
135+
{{< /tab >}}
136+
{{< /tabpane >}}
137+
138+
## id
139+
We can use the ID attribute available with element in a web page to locate it.
140+
Generally the ID property should be unique for a element on the web page.
141+
We will identify the Last Name field using it.
142+
143+
{{< tabpane langEqualsHeader=true >}}
144+
{{< tab header="Java" >}}
145+
WebDriver driver = new ChromeDriver();
146+
driver.findElement(By.id("lname"));
147+
{{< /tab >}}
148+
{{< tab header="Python" >}}
149+
driver = webdriver.Chrome()
150+
driver.find_element(By.ID, "lname")
151+
{{< /tab >}}
152+
{{< tab header="CSharp" >}}
153+
var driver = new ChromeDriver();
154+
driver.FindElement(By.Id("lname"));
155+
{{< /tab >}}
156+
{{< tab header="Ruby" >}}
157+
driver = Selenium::WebDriver.for :chrome
158+
driver.find_element(id: 'lname')
159+
{{< /tab >}}
160+
{{< tab header="JavaScript" >}}
161+
let driver = await new Builder().forBrowser('chrome').build();
162+
const loc = await driver.findElement(By.id('lname'));
163+
{{< /tab >}}
164+
{{< tab header="Kotlin" >}}
165+
val driver = ChromeDriver()
166+
val loc: WebElement = driver.findElement(By.id("lname"))
167+
{{< /tab >}}
168+
{{< /tabpane >}}
169+
170+
171+
## name
172+
We can use the NAME attribute available with element in a web page to locate it.
173+
Generally the NAME property should be unique for a element on the web page.
174+
We will identify the Newsletter checkbox using it.
175+
176+
{{< tabpane langEqualsHeader=true >}}
177+
{{< tab header="Java" >}}
178+
WebDriver driver = new ChromeDriver();
179+
driver.findElement(By.name("newsletter"));
180+
{{< /tab >}}
181+
{{< tab header="Python" >}}
182+
driver = webdriver.Chrome()
183+
driver.find_element(By.NAME, "newsletter")
184+
{{< /tab >}}
185+
{{< tab header="CSharp" >}}
186+
var driver = new ChromeDriver();
187+
driver.FindElement(By.Name("newsletter"));
188+
{{< /tab >}}
189+
{{< tab header="Ruby" >}}
190+
driver = Selenium::WebDriver.for :chrome
191+
driver.find_element(name: 'newsletter')
192+
{{< /tab >}}
193+
{{< tab header="JavaScript" >}}
194+
let driver = await new Builder().forBrowser('chrome').build();
195+
const loc = await driver.findElement(By.name('newsletter'));
196+
{{< /tab >}}
197+
{{< tab header="Kotlin" >}}
198+
val driver = ChromeDriver()
199+
val loc: WebElement = driver.findElement(By.name("newsletter"))
200+
{{< /tab >}}
201+
{{< /tabpane >}}
202+
203+
## link text
204+
If the element we want to locate is a link, we can use the link text locator
205+
to identify it on the web page. The link text is the text displayed of the link.
206+
In the HTML snippet shared, we have a link available, lets see how will we locate it.
207+
{{< tabpane langEqualsHeader=true >}}
208+
{{< tab header="Java" >}}
209+
WebDriver driver = new ChromeDriver();
210+
driver.findElement(By.linkText("Selenium Official Page"));
211+
{{< /tab >}}
212+
{{< tab header="Python" >}}
213+
driver = webdriver.Chrome()
214+
driver.find_element(By.LINK_TEXT, "Selenium Official Page")
215+
{{< /tab >}}
216+
{{< tab header="CSharp" >}}
217+
var driver = new ChromeDriver();
218+
driver.FindElement(By.LinkText("Selenium Official Page"));
219+
{{< /tab >}}
220+
{{< tab header="Ruby" >}}
221+
driver = Selenium::WebDriver.for :chrome
222+
driver.find_element(link_text: 'Selenium Official Page')
223+
{{< /tab >}}
224+
{{< tab header="JavaScript" >}}
225+
let driver = await new Builder().forBrowser('chrome').build();
226+
const loc = await driver.findElement(By.linkText('Selenium Official Page'));
227+
{{< /tab >}}
228+
{{< tab header="Kotlin" >}}
229+
val driver = ChromeDriver()
230+
val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page"))
231+
{{< /tab >}}
232+
{{< /tabpane >}}
233+
234+
## partial link text
235+
If the element we want to locate is a link, we can use the partial link text locator
236+
to identify it on the web page. The link text is the text displayed of the link.
237+
We can pass partial text as value.
238+
In the HTML snippet shared, we have a link available, lets see how will we locate it.
239+
{{< tabpane langEqualsHeader=true >}}
240+
{{< tab header="Java" >}}
241+
WebDriver driver = new ChromeDriver();
242+
driver.findElement(By.partialLinkText("Official Page"));
243+
{{< /tab >}}
244+
{{< tab header="Python" >}}
245+
driver = webdriver.Chrome()
246+
driver.find_element(By.PARTIAL_LINK_TEXT, "Official Page")
247+
{{< /tab >}}
248+
{{< tab header="CSharp" >}}
249+
var driver = new ChromeDriver();
250+
driver.FindElement(By.PartialLinkText("Official Page"));
251+
{{< /tab >}}
252+
{{< tab header="Ruby" >}}
253+
driver = Selenium::WebDriver.for :chrome
254+
driver.find_element(partial_link_text: 'Official Page')
255+
{{< /tab >}}
256+
{{< tab header="JavaScript" >}}
257+
let driver = await new Builder().forBrowser('chrome').build();
258+
const loc = await driver.findElement(By.partialLinkText('Official Page'));
259+
{{< /tab >}}
260+
{{< tab header="Kotlin" >}}
261+
val driver = ChromeDriver()
262+
val loc: WebElement = driver.findElement(By.partialLinkText("Official Page"))
263+
{{< /tab >}}
264+
{{< /tabpane >}}
265+
266+
## tag name
267+
We can use the HTML TAG itself as a locator to identify the web element on the page.
268+
From the above HTML snippet shared, lets identify the link, using its html tag "a".
269+
{{< tabpane langEqualsHeader=true >}}
270+
{{< tab header="Java" >}}
271+
WebDriver driver = new ChromeDriver();
272+
driver.findElement(By.tagName("a"));
273+
{{< /tab >}}
274+
{{< tab header="Python" >}}
275+
driver = webdriver.Chrome()
276+
driver.find_element(By.TAG_NAME, "a")
277+
{{< /tab >}}
278+
{{< tab header="CSharp" >}}
279+
var driver = new ChromeDriver();
280+
driver.FindElement(By.TagName("a"));
281+
{{< /tab >}}
282+
{{< tab header="Ruby" >}}
283+
driver = Selenium::WebDriver.for :chrome
284+
driver.find_element(tag_name: 'a')
285+
{{< /tab >}}
286+
{{< tab header="JavaScript" >}}
287+
let driver = await new Builder().forBrowser('chrome').build();
288+
const loc = await driver.findElement(By.tagName('a'));
289+
{{< /tab >}}
290+
{{< tab header="Kotlin" >}}
291+
val driver = ChromeDriver()
292+
val loc: WebElement = driver.findElement(By.tagName("a"))
293+
{{< /tab >}}
294+
{{< /tabpane >}}
295+
296+
## xpath
297+
298+
A HTML document can be considered as a XML document, and then we can use xpath
299+
which will be the path traversed to reach the element of interest to locate the element.
300+
The XPath could be absolute xpath, which is created from the root of the document.
301+
Example - /html/form/input[1]. This will return the male radio button.
302+
Or the xpath could be relative. Example- //input[@name='fname']. This will return the
303+
first name text box. Let us create locator for female radio button using xpath.
304+
305+
{{< tabpane langEqualsHeader=true >}}
306+
{{< tab header="Java" >}}
307+
WebDriver driver = new ChromeDriver();
308+
driver.findElement(By.xpath("//input[@value='f']"));
309+
{{< /tab >}}
310+
{{< tab header="Python" >}}
311+
driver = webdriver.Chrome()
312+
driver.find_element(By.XPATH, "//input[@value='f']")
313+
{{< /tab >}}
314+
{{< tab header="CSharp" >}}
315+
var driver = new ChromeDriver();
316+
driver.FindElement(By.Xpath("//input[@value='f']"));
317+
{{< /tab >}}
318+
{{< tab header="Ruby" >}}
319+
driver = Selenium::WebDriver.for :chrome
320+
driver.find_element(xpath: '//input[@value='f']')
321+
{{< /tab >}}
322+
{{< tab header="JavaScript" >}}
323+
let driver = await new Builder().forBrowser('chrome').build();
324+
const loc = await driver.findElement(By.xpath('//input[@value='f']'));
325+
{{< /tab >}}
326+
{{< tab header="Kotlin" >}}
327+
val driver = ChromeDriver()
328+
val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']'))
329+
{{< /tab >}}
330+
{{< /tabpane >}}
331+
37332

38333
## Relative Locators
39334

0 commit comments

Comments
 (0)