Skip to content

Commit 8298fcf

Browse files
AutomatedTesterAutomatedTester
committed
Adds documentation and examples for relative locator usage.
1 parent 1ba031b commit 8298fcf

File tree

9 files changed

+1751
-250
lines changed

9 files changed

+1751
-250
lines changed

‎docs_source_files/content/webdriver/web_element.de.md

Lines changed: 213 additions & 45 deletions
Large diffs are not rendered by default.

‎docs_source_files/content/webdriver/web_element.en.md

Lines changed: 187 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,169 @@ fun main() {
220220
{{< / code-panel >}}
221221
{{< / code-tab >}}
222222

223+
### Find Elements using relative locators
224+
225+
Note: This feature is available in Selenium 4 or later
226+
227+
These feature allows you to find Elements in the DOM based off the position
228+
of another element using relative locations like `above`, `below`, `toLeftOf`,
229+
and `toRightOf`. The Elements should be returned in proximity order.
230+
231+
232+
{{< code-tab >}}
233+
{{< code-panel language="java" >}}
234+
import org.openqa.selenium.By;
235+
import org.openqa.selenium.WebDriver;
236+
import org.openqa.selenium.WebElement;
237+
import org.openqa.selenium.chrome.ChromeDriver;
238+
import java.util.List;
239+
240+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
241+
242+
public class findElementsUsingRelativeLocators {
243+
public static void main(String[] args) {
244+
WebDriver driver = new ChromeDriver();
245+
try {
246+
driver.get("https://example.com");
247+
248+
// Get element with tag name 'div'
249+
WebElement fromElement = driver.findElement(By.tagName("div"));
250+
251+
// Get all the elements available with tag name 'p' above
252+
// WebElement `fromElement`
253+
List<WebElement> elements = driver.findElements(
254+
withTagName("p").above(fromElement)
255+
);
256+
for (WebElement e : elements) {
257+
System.out.println(e.getText());
258+
}
259+
} finally {
260+
driver.quit();
261+
}
262+
}
263+
}
264+
{{< / code-panel >}}
265+
{{< code-panel language="python" >}}
266+
from selenium import webdriver
267+
from selenium.webdriver.common.by import By
268+
from selenium.webdriver.support.relative_locator import with_tag_name
269+
270+
driver = webdriver.Chrome()
271+
driver.get("https://www.example.com")
272+
273+
# Get element with tag name 'div'
274+
form_element = driver.find_element(By.TAG_NAME, 'div')
275+
276+
# Get all the elements available with tag name 'p' above
277+
# WebElement `fromElement`'
278+
elements = elements = driver.find_elements(with_tag_name("p").above(form_element))
279+
for e in elements:
280+
print(e.text)
281+
{{< / code-panel >}}
282+
{{< code-panel language="csharp" >}}
283+
using OpenQA.Selenium;
284+
using OpenQA.Selenium.Chrome;
285+
using System.Collections.Generic;
286+
287+
namespace FindElementsUsingRelativeLocators {
288+
class FindElementsUsingRelativeLocators {
289+
public static void Main(string[] args) {
290+
IWebDriver driver = new ChromeDriver();
291+
try {
292+
driver.Navigate().GoToUrl("https://example.com");
293+
294+
// Get element with tag name 'div'
295+
IWebElement fromElement = driver.FindElement(By.TagName("div"));
296+
297+
// Get all the elements available with tag name 'p' above
298+
// WebElement `fromElement'
299+
ReadOnlyCollection<IWebElement> elements = driver.FindElements(
300+
RelativeBy.WithTagName("p").Above(fromElement)
301+
);
302+
foreach(IWebElement e in elements) {
303+
System.Console.WriteLine(e.Text);
304+
}
305+
} finally {
306+
driver.Quit();
307+
}
308+
}
309+
}
310+
}
311+
{{< / code-panel >}}
312+
{{< code-panel language="ruby" >}}
313+
require 'selenium-webdriver'
314+
driver = Selenium::WebDriver.for :chrome
315+
begin
316+
# Navigate to URL
317+
driver.get 'https://www.example.com'
318+
319+
# Get element with tag name 'div'
320+
from_element = driver.find_element(:tag_name,'div')
321+
322+
# Get all the elements available with tag name 'p' above
323+
# WebElement `fromElement`'
324+
elements = element.find_elements(
325+
relative: {tag_name: 'p', above: from_element}
326+
)
327+
328+
elements.each { |e|
329+
puts e.text
330+
}
331+
ensure
332+
driver.quit
333+
end
334+
{{< / code-panel >}}
335+
{{< code-panel language="javascript" >}}
336+
const {Builder, By} = require('selenium-webdriver');
337+
338+
(async function example() {
339+
let driver = new Builder()
340+
.forBrowser('chrome')
341+
.build();
342+
343+
await driver.get('https://www.example.com');
344+
345+
// Get element with tag name 'div'
346+
let fromElement = await driver.findElement(By.css("div"));
347+
348+
// Get all the elements available with tag name 'p' above
349+
// WebElement `fromElement'
350+
let elements = await driver.findElements(
351+
withTagName('p').above(fromElement)
352+
);
353+
for(let e of elements) {
354+
console.log(await e.getText());
355+
}
356+
})();
357+
{{< / code-panel >}}
358+
{{< code-panel language="kotlin" >}}
359+
import org.openqa.selenium.By
360+
import org.openqa.selenium.chrome.ChromeDriver
361+
362+
fun main() {
363+
val driver = ChromeDriver()
364+
try {
365+
driver.get("https://example.com")
366+
367+
// Get element with tag name 'div'
368+
val fromElement = driver.findElement(By.tagName("div"))
369+
370+
// Get all the elements available with tag name 'p' above
371+
// WebElement `fromElement''
372+
val elements = driver.findElements(
373+
withTagName("p").above(fromElement)
374+
)
375+
for (e in elements) {
376+
println(e.text)
377+
}
378+
} finally {
379+
driver.quit()
380+
}
381+
}
382+
{{< / code-panel >}}
383+
{{< / code-tab >}}
384+
385+
223386
## Find Element From Element
224387

225388
It is used to find a child element within the context of parent element.
@@ -546,23 +709,23 @@ It is used to track (or) find DOM element which has the focus in the current bro
546709

547710
## Is Element Enabled
548711

549-
This method is used to check if the connected Element
712+
This method is used to check if the connected Element
550713
is enabled or disabled on a webpage.
551-
Returns a boolean value, **True** if the connected element is
714+
Returns a boolean value, **True** if the connected element is
552715
**enabled** in the current browsing context else returns **false**.
553716

554717
{{< code-tab >}}
555718
{{< code-panel language="java" >}}
556-
//navigates to url
719+
//navigates to url
557720
driver.get("https://www.google.com/");
558-
721+
559722
//returns true if element is enabled else returns false
560723
boolean value = driver.findElement(By.name("btnK")).isEnabled();
561724
{{< / code-panel >}}
562725
{{< code-panel language="python" >}}
563726
# Navigate to url
564727
driver.get("http://www.google.com")
565-
728+
566729
# Returns true if element is enabled else returns false
567730
value = driver.find_element(By.NAME, 'btnK').is_enabled()
568731
{{< / code-panel >}}
@@ -591,28 +754,28 @@ await driver.get('https://www.google.com');
591754
let element = await driver.findElement(By.name("btnK")).isEnabled();
592755
{{< / code-panel >}}
593756
{{< code-panel language="kotlin" >}}
594-
//navigates to url
757+
//navigates to url
595758
driver.get("https://www.google.com/")
596-
759+
597760
//returns true if element is enabled else returns false
598761
val attr = driver.findElement(By.name("btnK")).isEnabled()
599762
{{< / code-panel >}}
600763
{{< / code-tab >}}
601764

602765
## Is Element Selected
603766

604-
This method determines if the referenced Element
605-
is _Selected_ or not. This method is widely used on
767+
This method determines if the referenced Element
768+
is _Selected_ or not. This method is widely used on
606769
Check boxes, radio buttons, input elements, and option elements.
607770

608-
Returns a boolean value, **True** if referenced element is
771+
Returns a boolean value, **True** if referenced element is
609772
**selected** in the current browsing context else returns **false**.
610773

611774
{{< code-tab >}}
612775
{{< code-panel language="java" >}}
613-
//navigates to url
776+
//navigates to url
614777
driver.get("https://the-internet.herokuapp.com/checkboxes");
615-
778+
616779
//returns true if element is checked else returns false
617780
boolean value = driver.findElement(By.cssSelector("input[type='checkbox']:first-of-type")).isSelected();
618781
{{< / code-panel >}}
@@ -626,7 +789,7 @@ value = driver.find_element(By.CSS_SELECTOR, "input[type='checkbox']:first-of-ty
626789
{{< code-panel language="csharp" >}}
627790
// Navigate to Url
628791
driver.Navigate().GoToUrl("https://the-internet.herokuapp.com/checkboxes");
629-
792+
630793
// Returns true if element ins checked else returns false
631794
bool value = driver.FindElement(By.CssSelector("input[type='checkbox']:last-of-type")).Selected;
632795
{{< / code-panel >}}
@@ -645,22 +808,22 @@ await driver.get('https://the-internet.herokuapp.com/checkboxes');
645808
let res = await driver.findElement(By.css("input[type='checkbox']:last-of-type")).isSelected();
646809
{{< / code-panel >}}
647810
{{< code-panel language="kotlin" >}}
648-
//navigates to url
811+
//navigates to url
649812
driver.get("https://the-internet.herokuapp.com/checkboxes")
650-
813+
651814
//returns true if element is checked else returns false
652815
val attr = driver.findElement(By.cssSelector("input[type='checkbox']:first-of-type")).isSelected()
653816
{{< / code-panel >}}
654817
{{< / code-tab >}}
655818

656819
## Get Element TagName
657820

658-
It is used to fetch the [TagName](https://www.w3.org/TR/webdriver/#dfn-get-element-tag-name)
821+
It is used to fetch the [TagName](https://www.w3.org/TR/webdriver/#dfn-get-element-tag-name)
659822
of the referenced Element which has the focus in the current browsing context.
660823

661824
{{< code-tab >}}
662825
{{< code-panel language="java" >}}
663-
//navigates to url
826+
//navigates to url
664827
driver.get("https://www.example.com");
665828

666829
//returns TagName of the element
@@ -676,7 +839,7 @@ attr = driver.find_element(By.CSS_SELECTOR, "h1").tag_name
676839
{{< code-panel language="csharp" >}}
677840
// Navigate to Url
678841
driver.Navigate().GoToUrl("https://www.example.com");
679-
842+
680843
// Returns TagName of the element
681844
string attr = driver.FindElement(By.CssSelector("h1")).TagName;
682845
{{< / code-panel >}}
@@ -695,17 +858,17 @@ await driver.get('https://www.example.com');
695858
let value = await driver.findElement(By.css('h1')).getTagName();
696859
{{< / code-panel >}}
697860
{{< code-panel language="kotlin" >}}
698-
//navigates to url
861+
//navigates to url
699862
driver.get("https://www.example.com")
700-
863+
701864
//returns TagName of the element
702865
val attr = driver.findElement(By.cssSelector("h1")).getTagName()
703866
{{< / code-panel >}}
704867
{{< / code-tab >}}
705868

706869
## Get Element Rect
707870

708-
It is used to fetch the dimensions and coordinates
871+
It is used to fetch the dimensions and coordinates
709872
of the referenced element.
710873

711874
The fetched data body contain the following details:
@@ -728,7 +891,7 @@ System.out.println(res.getX());
728891
{{< code-panel language="python" >}}
729892
# Navigate to url
730893
driver.get("https://www.example.com")
731-
894+
732895
# Returns height, width, x and y coordinates referenced element
733896
res = driver.find_element(By.CSS_SELECTOR, "h1").rect
734897
{{< / code-panel >}}
@@ -745,7 +908,7 @@ System.Console.WriteLine(res.Size);
745908
{{< code-panel language="ruby" >}}
746909
# Navigate to url
747910
driver.get 'https://www.example.com'
748-
911+
749912
# Returns height, width, x and y coordinates referenced element
750913
res = driver.find_element(css: "h1").rect
751914
{{< / code-panel >}}
@@ -770,7 +933,7 @@ println(res.getX())
770933

771934
## Get Element CSS Value
772935

773-
Retrieves the value of specified computed style property
936+
Retrieves the value of specified computed style property
774937
of an element in the current browsing context.
775938

776939
{{< code-tab >}}

0 commit comments

Comments
 (0)