To know more about Selenium, visit the official page
-Selenium Official Page
+ Male
+ Female
+
+
+
+
+
+
+
+
+
+
+
To know more about Selenium, visit the official page + Selenium Official Page
@@ -71,347 +72,345 @@ page. To understand and create locator we will use the following HTML snippet. ``` ## class name + The HTML page web element can have attribute class. We can see an example in the above shown HTML snippet. We can identify these elements using the class name locator -available in Selenium. +available in Selenium. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L20" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L7-L9" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ## css selector + CSS is the language used to style HTML pages. We can use css selector locator strategy to identify the element on the page. If the element has an id, we create the locator as css = #id. Otherwise the format we follow is css =[attribute=value] . -Let us see an example from above HTML snippet. We will create locator for First Name -textbox, using css. +Let us see an example from above HTML snippet. We will create locator for First Name +textbox, using css. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.cssSelector("#fname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L28" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L17-L19" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.CssSelector("#fname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.CssSelector("#fname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.css('#fname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.css("#fname")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.css('#fname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.css("#fname")) +{{< /tab >}} +{{< /tabpane >}} ## id -We can use the ID attribute of an element in a web page to locate it. -Generally the ID property should be unique for each element on the web page. -We will identify the Last Name field using it. + +We can use the ID attribute of an element in a web page to locate it. +Generally the ID property should be unique for each element on the web page. +We will identify the Last Name field using it. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.id("lname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L36" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L27-L29" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Id("lname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Id("lname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.id('lname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.id("lname")) - {{< /tab >}} -{{< /tabpane >}} - +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.id('lname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.id("lname")) +{{< /tab >}} +{{< /tabpane >}} ## name -We can use the NAME attribute of an element in a web page to locate it. -Generally the NAME property should be unique for each element on the web page. -We will identify the Newsletter checkbox using it. + +We can use the NAME attribute of an element in a web page to locate it. +Generally the NAME property should be unique for each element on the web page. +We will identify the Newsletter checkbox using it. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.name("newsletter")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L44" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L37-L39" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Name("newsletter")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Name("newsletter")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.name('newsletter')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.name("newsletter")) - {{< /tab >}} -{{< /tabpane >}} - -## link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.name('newsletter')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.name("newsletter")) +{{< /tab >}} +{{< /tabpane >}} + +## link text + If the element we want to locate is a link, we can use the link text locator -to identify it on the web page. The link text is the text displayed of the link. -In the HTML snippet shared, we have a link available, let's see how will we locate it. +to identify it on the web page. The link text is the text displayed of the link. +In the HTML snippet shared, we have a link available, let's see how will we locate it. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.linkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L52" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L47-L49" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.LinkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.LinkText("Selenium Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.linkText('Selenium Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) - {{< /tab >}} -{{< /tabpane >}} - -## partial link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.linkText('Selenium Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) +{{< /tab >}} +{{< /tabpane >}} + +## partial link text + If the element we want to locate is a link, we can use the partial link text locator -to identify it on the web page. The link text is the text displayed of the link. +to identify it on the web page. The link text is the text displayed of the link. We can pass partial text as value. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.partialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L60" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L57-L59" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.PartialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.PartialLinkText("Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.partialLinkText('Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.partialLinkText('Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) +{{< /tab >}} +{{< /tabpane >}} ## tag name + We can use the HTML TAG itself as a locator to identify the web element on the page. -From the above HTML snippet shared, lets identify the link, using its html tag "a". +From the above HTML snippet shared, lets identify the link, using its html tag "a". {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.tagName("a")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L68" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L67-L69" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.TagName("a")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.TagName("a")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.tagName('a')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.tagName("a")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.tagName('a')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.tagName("a")) +{{< /tab >}} +{{< /tabpane >}} -## xpath +## xpath A HTML document can be considered as a XML document, and then we can use xpath which will be the path traversed to reach the element of interest to locate the element. The XPath could be absolute xpath, which is created from the root of the document. Example - /html/form/input[1]. This will return the male radio button. Or the xpath could be relative. Example- //input[@name='fname']. This will return the -first name text box. Let us create locator for female radio button using xpath. +first name text box. Let us create locator for female radio button using xpath. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L76" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L77-L79" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Xpath("//input[@value='f']")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.xpath('//input[@value='f']')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - import org.openqa.selenium.By - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.xpath('//input[@value='f']')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +import org.openqa.selenium.By +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) +{{< /tab >}} +{{< /tabpane >}} ## Utilizing Locators -The FindElement makes using locators a breeze! For most languages, -all you need to do is utilize `webdriver.common.by.By`, however in +The FindElement makes using locators a breeze! For most languages, +all you need to do is utilize `webdriver.common.by.By`, however in others it's as simple as setting a parameter in the FindElement function ### By {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - import org.openqa.selenium.By; - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} - {{< tab header="Python" >}} - from selenium.webdriver.common.by import By - driver = webdriver.Chrome() - driver.find_element(By.CLASS_NAME, "information") - {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L84-L101" >}} +{{< /tab >}} +{{< tab header="Python" >}} +from selenium.webdriver.common.by import By +driver = webdriver.Chrome() +driver.find_element(By.CLASS_NAME, "information") +{{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - import org.openqa.selenium.By - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +import org.openqa.selenium.By +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ### ByChained -The `ByChained` class enables you to _chain_ two By locators together. For example, instead of having to locate a parent element, +The `ByChained` class enables you to _chain_ two By locators together. For example, instead of having to locate a parent +element, and then a child element of that parent, you can instead combine those two `FindElement()` functions into one. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L37-L38">}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L111-L112">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ### ByAll -The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By locators. -For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields +The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By +locators. +For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields seperately, you can instead find them together in one clean `FindElements()` {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L22-L23">}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L130-L131">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ## Relative Locators @@ -426,20 +425,23 @@ Selenium uses the JavaScript function [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) to determine the size and position of elements on the page, and can use this information to locate neighboring elements. -Relative locator methods can take as the argument for the point of origin, either a previously located element reference, -or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method with +Relative locator methods can take as the argument for the point of origin, either a previously located element +reference, +or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method +with an element object and it will work the same. Let us consider the below example for understanding the relative locators. -{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative Locators">}} +{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative +Locators">}} ### Available relative locators #### Above If the email text field element is not easily identifiable for some reason, but the password text field element is, -we can locate the text field element using the fact that it is an "input" element "above" the password element. +we can locate the text field element using the fact that it is an "input" element "above" the password element. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} @@ -493,8 +495,9 @@ val passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("ema #### Left of If the cancel button is not easily identifiable for some reason, but the submit button element is, -we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit element. - +we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit +element. + {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} {{< tab header="Java" >}} @@ -520,7 +523,8 @@ val cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("s #### Right of If the submit button is not easily identifiable for some reason, but the cancel button element is, -we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel element. +we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel +element. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} @@ -546,7 +550,7 @@ val submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id(" #### Near -If the relative positioning is not obvious, or it varies based on window size, you can use the near method to +If the relative positioning is not obvious, or it varies based on window size, you can use the near method to identify an element that is at most `50px` away from the provided locator. One great use case for this is to work with a form element that doesn't have an easily constructed locator, but its associated [input label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) does. @@ -575,7 +579,8 @@ val emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-ema ### Chaining relative locators -You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one element and right/left of another. +You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one +element and right/left of another. {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.ja.md b/website_and_docs/content/documentation/webdriver/elements/locators.ja.md index f28ed13f85b..70f1a3cec72 100644 --- a/website_and_docs/content/documentation/webdriver/elements/locators.ja.md +++ b/website_and_docs/content/documentation/webdriver/elements/locators.ja.md @@ -3,7 +3,7 @@ title: "要素を探す" linkTitle: "要素を探す" weight: 1 aliases: [ -"/ja/documentation/webdriver/relative_locators/" + "/ja/documentation/webdriver/relative_locators/" ] description: > DOM内の1つ以上の特定の要素を識別する方法 @@ -19,50 +19,51 @@ description: > WebDriverには標準のロケータが8種類あります。 -| ロケータ | 詳細 | -| -------- | ---------- | -| class name | class名に値を含む要素を探す (複合クラス名は使えない) | -| css selector | CSSセレクタが一致する要素を探す | -| id | id属性が一致する要素を探す | -| name | name属性が一致する要素を探す | -| link text | a要素のテキストが一致する要素を探す| -| partial link text | a要素のテキストが部分一致する要素を探す | -| tag name | タグ名が一致する要素を探す | -| xpath | XPathと一致する要素を探す | +| ロケータ | 詳細 | +|-------------------|--------------------------------| +| class name | class名に値を含む要素を探す (複合クラス名は使えない) | +| css selector | CSSセレクタが一致する要素を探す | +| id | id属性が一致する要素を探す | +| name | name属性が一致する要素を探す | +| link text | a要素のテキストが一致する要素を探す | +| partial link text | a要素のテキストが部分一致する要素を探す | +| tag name | タグ名が一致する要素を探す | +| xpath | XPathと一致する要素を探す | ## Creating Locators To work on a web element using Selenium, we need to first locate it on the web page. -Selenium provides us above mentioned ways, using which we can locate element on the +Selenium provides us above mentioned ways, using which we can locate element on the page. To understand and create locator we will use the following HTML snippet. ```html +To know more about Selenium, visit the official page
-Selenium Official Page
+ Male
+ Female
+
+
+
+
+
+
+
+
+
+
+
To know more about Selenium, visit the official page + Selenium Official Page
@@ -70,339 +71,337 @@ page. To understand and create locator we will use the following HTML snippet. ``` ## class name + The HTML page web element can have attribute class. We can see an example in the above shown HTML snippet. We can identify these elements using the class name locator -available in Selenium. +available in Selenium. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L20" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L7-L9" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ## css selector + CSS is the language used to style HTML pages. We can use css selector locator strategy to identify the element on the page. If the element has an id, we create the locator as css = #id. Otherwise the format we follow is css =[attribute=value] . -Let us see an example from above HTML snippet. We will create locator for First Name -textbox, using css. +Let us see an example from above HTML snippet. We will create locator for First Name +textbox, using css. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.cssSelector("#fname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L28" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L17-L19" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.CssSelector("#fname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.CssSelector("#fname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.css('#fname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.css("#fname")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.css('#fname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.css("#fname")) +{{< /tab >}} +{{< /tabpane >}} ## id -We can use the ID attribute available with element in a web page to locate it. -Generally the ID property should be unique for a element on the web page. -We will identify the Last Name field using it. + +We can use the ID attribute available with element in a web page to locate it. +Generally the ID property should be unique for a element on the web page. +We will identify the Last Name field using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.id("lname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L36" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L27-L29" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Id("lname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Id("lname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.id('lname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.id("lname")) - {{< /tab >}} -{{< /tabpane >}} - +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.id('lname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.id("lname")) +{{< /tab >}} +{{< /tabpane >}} ## name -We can use the NAME attribute available with element in a web page to locate it. -Generally the NAME property should be unique for a element on the web page. -We will identify the Newsletter checkbox using it. + +We can use the NAME attribute available with element in a web page to locate it. +Generally the NAME property should be unique for a element on the web page. +We will identify the Newsletter checkbox using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.name("newsletter")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L44" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L37-L39" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Name("newsletter")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Name("newsletter")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.name('newsletter')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.name("newsletter")) - {{< /tab >}} -{{< /tabpane >}} - -## link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.name('newsletter')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.name("newsletter")) +{{< /tab >}} +{{< /tabpane >}} + +## link text + If the element we want to locate is a link, we can use the link text locator -to identify it on the web page. The link text is the text displayed of the link. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +to identify it on the web page. The link text is the text displayed of the link. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.linkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L52" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L47-L49" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.LinkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.LinkText("Selenium Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.linkText('Selenium Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) - {{< /tab >}} -{{< /tabpane >}} - -## partial link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.linkText('Selenium Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) +{{< /tab >}} +{{< /tabpane >}} + +## partial link text + If the element we want to locate is a link, we can use the partial link text locator -to identify it on the web page. The link text is the text displayed of the link. +to identify it on the web page. The link text is the text displayed of the link. We can pass partial text as value. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.partialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L60" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L57-L59" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.PartialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.PartialLinkText("Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.partialLinkText('Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.partialLinkText('Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) +{{< /tab >}} +{{< /tabpane >}} ## tag name + We can use the HTML TAG itself as a locator to identify the web element on the page. -From the above HTML snippet shared, lets identify the link, using its html tag "a". +From the above HTML snippet shared, lets identify the link, using its html tag "a". {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.tagName("a")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L68" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L67-L69" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.TagName("a")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.TagName("a")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.tagName('a')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.tagName("a")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.tagName('a')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.tagName("a")) +{{< /tab >}} +{{< /tabpane >}} -## xpath +## xpath A HTML document can be considered as a XML document, and then we can use xpath which will be the path traversed to reach the element of interest to locate the element. The XPath could be absolute xpath, which is created from the root of the document. Example - /html/form/input[1]. This will return the male radio button. Or the xpath could be relative. Example- //input[@name='fname']. This will return the -first name text box. Let us create locator for female radio button using xpath. +first name text box. Let us create locator for female radio button using xpath. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L76" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L77-L79" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Xpath("//input[@value='f']")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.xpath('//input[@value='f']')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.xpath('//input[@value='f']')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) +{{< /tab >}} +{{< /tabpane >}} ## Utilizing Locators -The FindElement makes using locators a breeze! For most languages, -all you need to do is utilize `webdriver.common.by.By`, however in +The FindElement makes using locators a breeze! For most languages, +all you need to do is utilize `webdriver.common.by.By`, however in others it's as simple as setting a parameter in the FindElement function ### By {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - import org.openqa.selenium.By; - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} - {{< tab header="Python" >}} - from selenium.webdriver.common.by import By - driver = webdriver.Chrome() - driver.find_element(By.CLASS_NAME, "information") - {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L84-L101" >}} +{{< /tab >}} +{{< tab header="Python" >}} +from selenium.webdriver.common.by import By +driver = webdriver.Chrome() +driver.find_element(By.CLASS_NAME, "information") +{{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - import org.openqa.selenium.By - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +import org.openqa.selenium.By +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ### ByChained -The `ByChained` class enables you to _chain_ two By locators together. For example, instead of having to -locate a parent element, and then a child element of that parent, you can instead combine those two `FindElement` +The `ByChained` class enables you to _chain_ two By locators together. For example, instead of having to +locate a parent element, and then a child element of that parent, you can instead combine those two `FindElement` functions into one. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L37-L38" >}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L111-L112">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ### ByAll -The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By locators. -For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields seperately, +The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By +locators. +For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields +seperately, you can instead find them together in one clean `FindElements()` {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L22-L23">}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L130-L131">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ## 相対ロケーター @@ -415,23 +414,27 @@ an easily constructed locator. Selenium uses the JavaScript function [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) -to determine the size and position of elements on the page, and can use this information to locate neighboring elements. +to determine the size and position of elements on the page, and can use this information to locate neighboring +elements. find the relative elements. -Relative locator methods can take as the argument for the point of origin, either a previously located element reference, -or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method with +Relative locator methods can take as the argument for the point of origin, either a previously located element +reference, +or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method +with an element object and it will work the same. Let us consider the below example for understanding the relative locators. -{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative Locators">}} +{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative +Locators">}} ### Available relative locators #### Above If the email text field element is not easily identifiable for some reason, but the password text field element is, -we can locate the text field element using the fact that it is an "input" element "above" the password element. +we can locate the text field element using the fact that it is an "input" element "above" the password element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -483,8 +486,9 @@ val passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("ema #### Left of If the cancel button is not easily identifiable for some reason, but the submit button element is, -we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit element. - +we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit +element. + {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit")); @@ -509,7 +513,8 @@ val cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("s #### Right of If the submit button is not easily identifiable for some reason, but the cancel button element is, -we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel element. +we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel +element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -534,7 +539,7 @@ val submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id(" #### Near -If the relative positioning is not obvious, or it varies based on window size, you can use the near method to +If the relative positioning is not obvious, or it varies based on window size, you can use the near method to identify an element that is at most `50px` away from the provided locator. One great use case for this is to work with a form element that doesn't have an easily constructed locator, but its associated [input label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) does. @@ -562,7 +567,8 @@ val emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-ema ### Chaining relative locators -You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one element and right/left of another. +You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one +element and right/left of another. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md b/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md index f50ac162eff..d72c206cd1c 100644 --- a/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md +++ b/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md @@ -4,7 +4,7 @@ linkTitle: "Localizando elementos" weight: 4 needsTranslation: true aliases: [ -"/pt-br/documentation/webdriver/relative_locators/" + "/pt-br/documentation/webdriver/relative_locators/" ] description: > Formas de identificar um ou mais elementos no DOM. @@ -14,58 +14,58 @@ Um localizador é uma forma de identificar elementos numa página. São os argum [Finders]({{< ref "finders.md" >}}) . Visite os nossas [directrizes e recomendações]({{< ref "/documentation/test_practices/encouraged" >}}) para dicas sobre -[locators]({{< ref "/documentation/test_practices/encouraged/locators.md" >}}), incluindo quais usar e quando, +[locators]({{< ref "/documentation/test_practices/encouraged/locators.md" >}}), incluindo quais usar e quando, e também porque é que deve declarar localizadores separadamente dos finders. - ### Estratégias de seleção de elemento Existem oito estratégias diferentes de localização de elementos embutidas no WebDriver: -| Localizador | Descrição | -| -------- | ---------- | -| class name | Localiza elementos cujo nome de classe contém o valor de pesquisa (nomes de classes compostas não são permitidos) | -| css selector | Localiza elementos que correspondem a um seletor CSS | -| id | Localiza elementos cujo atributo de ID corresponde ao valor de pesquisa | -| name | Localiza elementos cujo atributo NAME corresponde ao valor de pesquisa | -| link text | Localiza elementos âncora cujo texto visível corresponde ao valor de pesquisa | +| Localizador | Descrição | +|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| +| class name | Localiza elementos cujo nome de classe contém o valor de pesquisa (nomes de classes compostas não são permitidos) | +| css selector | Localiza elementos que correspondem a um seletor CSS | +| id | Localiza elementos cujo atributo de ID corresponde ao valor de pesquisa | +| name | Localiza elementos cujo atributo NAME corresponde ao valor de pesquisa | +| link text | Localiza elementos âncora cujo texto visível corresponde ao valor de pesquisa | | partial link text | Localiza elementos âncora cujo texto visível contém o valor da pesquisa. Se vários elementos forem correspondentes, apenas o primeiro será selecionado. | -| tag name | Localiza elementos cujo nome de tag corresponde ao valor de pesquisa | -| xpath | Localiza elementos que correspondem a uma expressão XPath | +| tag name | Localiza elementos cujo nome de tag corresponde ao valor de pesquisa | +| xpath | Localiza elementos que correspondem a uma expressão XPath | ## Creating Locators To work on a web element using Selenium, we need to first locate it on the web page. -Selenium provides us above mentioned ways, using which we can locate element on the +Selenium provides us above mentioned ways, using which we can locate element on the page. To understand and create locator we will use the following HTML snippet. ```html +To know more about Selenium, visit the official page
-Selenium Official Page
+ Male
+ Female
+
+
+
+
+
+
+
+
+
+
+
To know more about Selenium, visit the official page + Selenium Official Page
@@ -73,339 +73,336 @@ page. To understand and create locator we will use the following HTML snippet. ``` ## class name + The HTML page web element can have attribute class. We can see an example in the above shown HTML snippet. We can identify these elements using the class name locator -available in Selenium. +available in Selenium. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L20" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L7-L9" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ## css selector + CSS is the language used to style HTML pages. We can use css selector locator strategy to identify the element on the page. If the element has an id, we create the locator as css = #id. Otherwise the format we follow is css =[attribute=value] . -Let us see an example from above HTML snippet. We will create locator for First Name -textbox, using css. +Let us see an example from above HTML snippet. We will create locator for First Name +textbox, using css. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.cssSelector("#fname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L28" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L17-L19" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.CssSelector("#fname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.CssSelector("#fname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.css('#fname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.css("#fname")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.css('#fname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.css("#fname")) +{{< /tab >}} +{{< /tabpane >}} ## id -We can use the ID attribute available with element in a web page to locate it. -Generally the ID property should be unique for a element on the web page. -We will identify the Last Name field using it. + +We can use the ID attribute available with element in a web page to locate it. +Generally the ID property should be unique for a element on the web page. +We will identify the Last Name field using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.id("lname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L36" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L27-L29" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Id("lname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Id("lname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.id('lname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.id("lname")) - {{< /tab >}} -{{< /tabpane >}} - +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.id('lname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.id("lname")) +{{< /tab >}} +{{< /tabpane >}} ## name -We can use the NAME attribute available with element in a web page to locate it. -Generally the NAME property should be unique for a element on the web page. -We will identify the Newsletter checkbox using it. + +We can use the NAME attribute available with element in a web page to locate it. +Generally the NAME property should be unique for a element on the web page. +We will identify the Newsletter checkbox using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.name("newsletter")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L44" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L37-L39" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Name("newsletter")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Name("newsletter")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.name('newsletter')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.name("newsletter")) - {{< /tab >}} -{{< /tabpane >}} - -## link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.name('newsletter')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.name("newsletter")) +{{< /tab >}} +{{< /tabpane >}} + +## link text + If the element we want to locate is a link, we can use the link text locator -to identify it on the web page. The link text is the text displayed of the link. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +to identify it on the web page. The link text is the text displayed of the link. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.linkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L52" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L47-L49" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.LinkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.LinkText("Selenium Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.linkText('Selenium Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) - {{< /tab >}} -{{< /tabpane >}} - -## partial link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.linkText('Selenium Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) +{{< /tab >}} +{{< /tabpane >}} + +## partial link text + If the element we want to locate is a link, we can use the partial link text locator -to identify it on the web page. The link text is the text displayed of the link. +to identify it on the web page. The link text is the text displayed of the link. We can pass partial text as value. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.partialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L60" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L57-L59" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.PartialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.PartialLinkText("Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.partialLinkText('Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.partialLinkText('Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) +{{< /tab >}} +{{< /tabpane >}} ## tag name + We can use the HTML TAG itself as a locator to identify the web element on the page. -From the above HTML snippet shared, lets identify the link, using its html tag "a". +From the above HTML snippet shared, lets identify the link, using its html tag "a". {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.tagName("a")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L68" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L67-L69" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.TagName("a")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.TagName("a")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.tagName('a')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.tagName("a")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.tagName('a')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.tagName("a")) +{{< /tab >}} +{{< /tabpane >}} -## xpath +## xpath A HTML document can be considered as a XML document, and then we can use xpath which will be the path traversed to reach the element of interest to locate the element. The XPath could be absolute xpath, which is created from the root of the document. Example - /html/form/input[1]. This will return the male radio button. Or the xpath could be relative. Example- //input[@name='fname']. This will return the -first name text box. Let us create locator for female radio button using xpath. +first name text box. Let us create locator for female radio button using xpath. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L76" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L77-L79" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Xpath("//input[@value='f']")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.xpath('//input[@value='f']')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.xpath('//input[@value='f']')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) +{{< /tab >}} +{{< /tabpane >}} ## Utilizing Locators -The FindElement makes using locators a breeze! For most languages, -all you need to do is utilize `webdriver.common.by.By`, however in +The FindElement makes using locators a breeze! For most languages, +all you need to do is utilize `webdriver.common.by.By`, however in others it's as simple as setting a parameter in the FindElement function ### By {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - import org.openqa.selenium.By; - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} - {{< tab header="Python" >}} - from selenium.webdriver.common.by import By - driver = webdriver.Chrome() - driver.find_element(By.CLASS_NAME, "information") - {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L84-L101" >}} +{{< /tab >}} +{{< tab header="Python" >}} +from selenium.webdriver.common.by import By +driver = webdriver.Chrome() +driver.find_element(By.CLASS_NAME, "information") +{{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - import org.openqa.selenium.By - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +import org.openqa.selenium.By +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ### ByChained -The `ByChained` class enables you to _chain_ two By locators together. For example, instead of -having to locate a parent element, and then a child element of that parent, you can instead +The `ByChained` class enables you to _chain_ two By locators together. For example, instead of +having to locate a parent element, and then a child element of that parent, you can instead combine those two `FindElement` functions into one. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L37-L38" >}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L111-L112">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ### ByAll -The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By locators. -For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields +The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By +locators. +For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields seperately, you can instead find them together in one clean `FindElements()` {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L22-L23">}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L130-L131">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ## Relative Locators @@ -418,23 +415,27 @@ an easily constructed locator. Selenium uses the JavaScript function [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) -to determine the size and position of elements on the page, and can use this information to locate neighboring elements. +to determine the size and position of elements on the page, and can use this information to locate neighboring +elements. find the relative elements. -Relative locator methods can take as the argument for the point of origin, either a previously located element reference, -or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method with +Relative locator methods can take as the argument for the point of origin, either a previously located element +reference, +or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method +with an element object and it will work the same. Let us consider the below example for understanding the relative locators. -{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative Locators">}} +{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative +Locators">}} ### Available relative locators #### Above If the email text field element is not easily identifiable for some reason, but the password text field element is, -we can locate the text field element using the fact that it is an "input" element "above" the password element. +we can locate the text field element using the fact that it is an "input" element "above" the password element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -486,8 +487,9 @@ val passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("ema #### Left of If the cancel button is not easily identifiable for some reason, but the submit button element is, -we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit element. - +we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit +element. + {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit")); @@ -512,7 +514,8 @@ val cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("s #### Right of If the submit button is not easily identifiable for some reason, but the cancel button element is, -we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel element. +we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel +element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -537,7 +540,7 @@ val submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id(" #### Near -If the relative positioning is not obvious, or it varies based on window size, you can use the near method to +If the relative positioning is not obvious, or it varies based on window size, you can use the near method to identify an element that is at most `50px` away from the provided locator. One great use case for this is to work with a form element that doesn't have an easily constructed locator, but its associated [input label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) does. @@ -565,7 +568,8 @@ val emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-ema ### Chaining relative locators -You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one element and right/left of another. +You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one +element and right/left of another. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md b/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md index 7681f487f5a..466c7b64776 100644 --- a/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md +++ b/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md @@ -4,7 +4,7 @@ linkTitle: "定位器" weight: 4 needsTranslation: true aliases: [ -"/zh-cn/documentation/webdriver/relative_locators/" + "/zh-cn/documentation/webdriver/relative_locators/" ] description: > 在DOM中标识一个或多个特定元素的方法. @@ -16,56 +16,55 @@ description: > 查看 [鼓励测试练习]({{< ref "/documentation/test_practices/encouraged" >}}) 寻找 [定位器]({{< ref "/documentation/test_practices/encouraged/locators.md" >}})的小技巧， 包含在查找方法中，不同时间，不同原因下，单独声明的定位器的使用方法。 - - ### 元素选择策略 在 WebDriver 中有 8 种不同的内置元素定位策略： -| 定位器 Locator | 描述 | -| -------- | ---------- | -| class name | 定位class属性与搜索值匹配的元素（不允许使用复合类名） | -| css selector | 定位 CSS 选择器匹配的元素 | -| id | 定位 id 属性与搜索值匹配的元素 | -| name | 定位 name 属性与搜索值匹配的元素 | -| link text | 定位link text可视文本与搜索值完全匹配的锚元素 | +| 定位器 Locator | 描述 | +|-------------------|----------------------------------------------------| +| class name | 定位class属性与搜索值匹配的元素（不允许使用复合类名） | +| css selector | 定位 CSS 选择器匹配的元素 | +| id | 定位 id 属性与搜索值匹配的元素 | +| name | 定位 name 属性与搜索值匹配的元素 | +| link text | 定位link text可视文本与搜索值完全匹配的锚元素 | | partial link text | 定位link text可视文本部分与搜索值部分匹配的锚点元素。如果匹配多个元素，则只选择第一个元素。 | -| tag name | 定位标签名称与搜索值匹配的元素 | -| xpath | 定位与 XPath 表达式匹配的元素 | +| tag name | 定位标签名称与搜索值匹配的元素 | +| xpath | 定位与 XPath 表达式匹配的元素 | ## Creating Locators To work on a web element using Selenium, we need to first locate it on the web page. -Selenium provides us above mentioned ways, using which we can locate element on the +Selenium provides us above mentioned ways, using which we can locate element on the page. To understand and create locator we will use the following HTML snippet. ```html +To know more about Selenium, visit the official page
-Selenium Official Page
+ Male
+ Female
+
+
+
+
+
+
+
+
+
+
+
To know more about Selenium, visit the official page + Selenium Official Page
@@ -73,339 +72,336 @@ page. To understand and create locator we will use the following HTML snippet. ``` ## class name + The HTML page web element can have attribute class. We can see an example in the above shown HTML snippet. We can identify these elements using the class name locator -available in Selenium. +available in Selenium. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L20" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L7-L9" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ## css selector + CSS is the language used to style HTML pages. We can use css selector locator strategy to identify the element on the page. If the element has an id, we create the locator as css = #id. Otherwise the format we follow is css =[attribute=value] . -Let us see an example from above HTML snippet. We will create locator for First Name -textbox, using css. +Let us see an example from above HTML snippet. We will create locator for First Name +textbox, using css. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.cssSelector("#fname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L28" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L17-L19" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.CssSelector("#fname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.CssSelector("#fname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.css('#fname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.css("#fname")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.css('#fname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.css("#fname")) +{{< /tab >}} +{{< /tabpane >}} ## id -We can use the ID attribute available with element in a web page to locate it. -Generally the ID property should be unique for a element on the web page. -We will identify the Last Name field using it. + +We can use the ID attribute available with element in a web page to locate it. +Generally the ID property should be unique for a element on the web page. +We will identify the Last Name field using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.id("lname")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L36" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L27-L29" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Id("lname")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Id("lname")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.id('lname')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.id("lname")) - {{< /tab >}} -{{< /tabpane >}} - +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.id('lname')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.id("lname")) +{{< /tab >}} +{{< /tabpane >}} ## name -We can use the NAME attribute available with element in a web page to locate it. -Generally the NAME property should be unique for a element on the web page. -We will identify the Newsletter checkbox using it. + +We can use the NAME attribute available with element in a web page to locate it. +Generally the NAME property should be unique for a element on the web page. +We will identify the Newsletter checkbox using it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.name("newsletter")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L44" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L37-L39" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Name("newsletter")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Name("newsletter")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.name('newsletter')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.name("newsletter")) - {{< /tab >}} -{{< /tabpane >}} - -## link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.name('newsletter')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.name("newsletter")) +{{< /tab >}} +{{< /tabpane >}} + +## link text + If the element we want to locate is a link, we can use the link text locator -to identify it on the web page. The link text is the text displayed of the link. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +to identify it on the web page. The link text is the text displayed of the link. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.linkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L52" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L47-L49" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.LinkText("Selenium Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.LinkText("Selenium Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.linkText('Selenium Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) - {{< /tab >}} -{{< /tabpane >}} - -## partial link text +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.linkText('Selenium Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page")) +{{< /tab >}} +{{< /tabpane >}} + +## partial link text + If the element we want to locate is a link, we can use the partial link text locator -to identify it on the web page. The link text is the text displayed of the link. +to identify it on the web page. The link text is the text displayed of the link. We can pass partial text as value. -In the HTML snippet shared, we have a link available, lets see how will we locate it. +In the HTML snippet shared, we have a link available, lets see how will we locate it. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.partialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L60" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L57-L59" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.PartialLinkText("Official Page")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.PartialLinkText("Official Page")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.partialLinkText('Official Page')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.partialLinkText('Official Page')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.partialLinkText("Official Page")) +{{< /tab >}} +{{< /tabpane >}} ## tag name + We can use the HTML TAG itself as a locator to identify the web element on the page. -From the above HTML snippet shared, lets identify the link, using its html tag "a". +From the above HTML snippet shared, lets identify the link, using its html tag "a". {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.tagName("a")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L68" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L67-L69" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.TagName("a")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.TagName("a")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.tagName('a')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.tagName("a")) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.tagName('a')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.tagName("a")) +{{< /tab >}} +{{< /tabpane >}} -## xpath +## xpath A HTML document can be considered as a XML document, and then we can use xpath which will be the path traversed to reach the element of interest to locate the element. The XPath could be absolute xpath, which is created from the root of the document. Example - /html/form/input[1]. This will return the male radio button. Or the xpath could be relative. Example- //input[@name='fname']. This will return the -first name text box. Let us create locator for female radio button using xpath. +first name text box. Let us create locator for female radio button using xpath. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" >}} - WebDriver driver = new ChromeDriver(); - driver.findElement(By.xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L76" >}} +{{< /tab >}} {{< tab header="Python" text=true >}} {{< gh-codeblock path="/examples/python/tests/elements/test_locators.py#L77-L79" >}} {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.Xpath("//input[@value='f']")); - {{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.Xpath("//input[@value='f']")); +{{< /tab >}} {{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}} {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.xpath('//input[@value='f']')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.xpath('//input[@value='f']')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']')) +{{< /tab >}} +{{< /tabpane >}} ## Utilizing Locators -The FindElement makes using locators a breeze! For most languages, -all you need to do is utilize `webdriver.common.by.By`, however in +The FindElement makes using locators a breeze! For most languages, +all you need to do is utilize `webdriver.common.by.By`, however in others it's as simple as setting a parameter in the FindElement function ### By {{< tabpane langEqualsHeader=true >}} {{< badge-examples >}} - {{< tab header="Java" >}} - import org.openqa.selenium.By; - WebDriver driver = new ChromeDriver(); - driver.findElement(By.className("information")); - {{< /tab >}} - {{< tab header="Python" >}} - from selenium.webdriver.common.by import By - driver = webdriver.Chrome() - driver.find_element(By.CLASS_NAME, "information") - {{< /tab >}} - {{< tab header="CSharp" >}} - var driver = new ChromeDriver(); - driver.FindElement(By.ClassName("information")); - {{< /tab >}} - {{< tab header="Ruby" text=true >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L84-L101" >}} +{{< /tab >}} +{{< tab header="Python" >}} +from selenium.webdriver.common.by import By +driver = webdriver.Chrome() +driver.find_element(By.CLASS_NAME, "information") +{{< /tab >}} +{{< tab header="CSharp" >}} +var driver = new ChromeDriver(); +driver.FindElement(By.ClassName("information")); +{{< /tab >}} +{{< tab header="Ruby" text=true >}} {{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}} - {{< /tab >}} - {{< tab header="JavaScript" >}} - let driver = await new Builder().forBrowser('chrome').build(); - const loc = await driver.findElement(By.className('information')); - {{< /tab >}} - {{< tab header="Kotlin" >}} - import org.openqa.selenium.By - val driver = ChromeDriver() - val loc: WebElement = driver.findElement(By.className("information")) - {{< /tab >}} -{{< /tabpane >}} +{{< /tab >}} +{{< tab header="JavaScript" >}} +let driver = await new Builder().forBrowser('chrome').build(); +const loc = await driver.findElement(By.className('information')); +{{< /tab >}} +{{< tab header="Kotlin" >}} +import org.openqa.selenium.By +val driver = ChromeDriver() +val loc: WebElement = driver.findElement(By.className("information")) +{{< /tab >}} +{{< /tabpane >}} ### ByChained -The `ByChained` class enables you to _chain_ two By locators together. For example, -instead of having to locate a parent element, and then a child element of that parent, +The `ByChained` class enables you to _chain_ two By locators together. For example, +instead of having to locate a parent element, and then a child element of that parent, you can instead combine those two `FindElement` functions into one. {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L37-L38" >}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L111-L112">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ### ByAll -The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By locators. -For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields +The `ByAll` class enables you to utilize two By locators at once, finding elements that mach _either_ of your By +locators. +For example, instead of having to utilize two `FindElement()` functions to find the username and password input fields seperately, you can instead find them together in one clean `FindElements()` {{< tabpane langEqualsHeader=true >}} - {{< tab header="Java" text=true >}} - {{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L22-L23">}} - {{< /tab >}} - {{< tab header="Python" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="CSharp" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Ruby" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="JavaScript" text=true >}} - {{< badge-code >}} - {{< /tab >}} - {{< tab header="Kotlin" text=true >}} - {{< badge-code >}} - {{< /tab >}} -{{< /tabpane >}} +{{< tab header="Java" text=true >}} +{{< gh-codeblock path="/examples/java/src/test/java/dev/selenium/elements/LocatorsTest.java#L130-L131">}} +{{< /tab >}} +{{< tab header="Python" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="CSharp" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Ruby" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="JavaScript" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< tab header="Kotlin" text=true >}} +{{< badge-code >}} +{{< /tab >}} +{{< /tabpane >}} ## Relative Locators @@ -418,23 +414,27 @@ an easily constructed locator. Selenium uses the JavaScript function [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) -to determine the size and position of elements on the page, and can use this information to locate neighboring elements. +to determine the size and position of elements on the page, and can use this information to locate neighboring +elements. find the relative elements. -Relative locator methods can take as the argument for the point of origin, either a previously located element reference, -or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method with +Relative locator methods can take as the argument for the point of origin, either a previously located element +reference, +or another locator. In these examples we'll be using locators only, but you could swap the locator in the final method +with an element object and it will work the same. Let us consider the below example for understanding the relative locators. -{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative Locators">}} +{{< figure src="/images/documentation/webdriver/relative_locators.png" class="img-responsive text-center" alt="Relative +Locators">}} ### Available relative locators #### Above If the email text field element is not easily identifiable for some reason, but the password text field element is, -we can locate the text field element using the fact that it is an "input" element "above" the password element. +we can locate the text field element using the fact that it is an "input" element "above" the password element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -486,8 +486,9 @@ val passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("ema #### Left of If the cancel button is not easily identifiable for some reason, but the submit button element is, -we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit element. - +we can locate the cancel button element using the fact that it is a "button" element to the "left of" the submit +element. + {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit")); @@ -512,7 +513,8 @@ val cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("s #### Right of If the submit button is not easily identifiable for some reason, but the cancel button element is, -we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel element. +we can locate the submit button element using the fact that it is a "button" element "to the right of" the cancel +element. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}} @@ -537,7 +539,7 @@ val submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id(" #### Near -If the relative positioning is not obvious, or it varies based on window size, you can use the near method to +If the relative positioning is not obvious, or it varies based on window size, you can use the near method to identify an element that is at most `50px` away from the provided locator. One great use case for this is to work with a form element that doesn't have an easily constructed locator, but its associated [input label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) does. @@ -565,7 +567,8 @@ val emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-ema ### Chaining relative locators -You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one element and right/left of another. +You can also chain locators if needed. Sometimes the element is most easily identified as being both above/below one +element and right/left of another. {{< tabpane langEqualsHeader=true >}} {{< tab header="Java" >}}