WebDriver Exploration Part-2(Locating WebElements)
In this lecture, we will learn how we can locate elements and perform an operation on them.
WebElement represents the HTML element with whom we interact during testing.
We will now look at how we can find elements and store them in IWebElement Interface
Inspecting Element in Chrome browser
Open Google home page and right-click on the element with you want to inspect and choose inspect from the popup menu and you can see all the HTML attributes for the element
Now we know how can one inspect an element, we will start with locating element and then we will create sample script to interact with an element
Locating by ID
We will open the google home page and inspect the image above the search text box and you will see that the image is in Div tag with ID as "hplogo".
We will create a script to find the div element and then click on the element which will open the search page as per the logo image
Locating by Name
We will open google home page and find search textbox by name attribute and type 'test' string
Locating By Class Name
We will open google home page and find google search page button by class name and then print the button text on the console
Output:-
Button Text: Google Search
Locating By Xpath
Here we will find and click on Gmail link on the header.
On inspecting header element we can see there is no ID or Name attributes using which we can directly locate the element. In such conditions, we can use XPath where we can find the parent element which has unique identification and then we can locate the element which has a tag as 'a' and text as 'Gmail'
Locating By CSS
Here we will do the same steps as done above in Xpath example, instead, we will use a CSS selector
Here locator div#gb means div tag with 'gb' ID attribute value
Also, if you want to find by class name then use dot(.) keyword
for example, div.cl means div tag with class value as 'cl'
Locating By Link Text
We will find the Gmail link on google home page using the link text method
Locating by Partial Link Text
We will find the Gmail link on google home page using the partial link text method
That's all I have for this lecture 👱
WebElement represents the HTML element with whom we interact during testing.
We will now look at how we can find elements and store them in IWebElement Interface
Inspecting Element in Chrome browser
Open Google home page and right-click on the element with you want to inspect and choose inspect from the popup menu and you can see all the HTML attributes for the element
Now we know how can one inspect an element, we will start with locating element and then we will create sample script to interact with an element
Locating by ID
We will open the google home page and inspect the image above the search text box and you will see that the image is in Div tag with ID as "hplogo".
We will create a script to find the div element and then click on the element which will open the search page as per the logo image
[TestMethod] public void Verify_Locating_By_ID() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By ID IWebElement logoElement= driver.FindElement(By.Id("hplogo")); //Click on Logo ELement logoElement.Click(); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Locating by Name
We will open google home page and find search textbox by name attribute and type 'test' string
[TestMethod] public void Verify_Locating_By_Name() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By name IWebElement searchTxtbox = driver.FindElement(By.Name("q")); //Click on ELement searchTxtbox.SendKeys("test"); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Locating By Class Name
We will open google home page and find google search page button by class name and then print the button text on the console
[TestMethod] public void Verify_Locating_By_Class_Name() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By class name IWebElement searchTxtbox = driver.FindElement(By.ClassName("gNO89b")); //Get the Button text ie value attribute text string value=searchTxtbox.GetAttribute("value"); Console.WriteLine("Button Text: " + value); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Output:-
Button Text: Google Search
Locating By Xpath
Here we will find and click on Gmail link on the header.
On inspecting header element we can see there is no ID or Name attributes using which we can directly locate the element. In such conditions, we can use XPath where we can find the parent element which has unique identification and then we can locate the element which has a tag as 'a' and text as 'Gmail'
[TestMethod] public void Verify_Locating_By_XPath() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By ID IWebElement gmailLink = driver.FindElement(
By.XPath("//div[@id='gb']//a[text()='Gmail']")); //Click gmail link gmailLink.Click(); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Locating By CSS
Here we will do the same steps as done above in Xpath example, instead, we will use a CSS selector
[TestMethod] public void Verify_Locating_By_CSS() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By ID IWebElement gmailLink = driver.FindElement( By.CssSelector("div#gb a")); //Click gmail link gmailLink.Click(); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Here locator div#gb means div tag with 'gb' ID attribute value
Also, if you want to find by class name then use dot(.) keyword
for example, div.cl means div tag with class value as 'cl'
Locating By Link Text
We will find the Gmail link on google home page using the link text method
[TestMethod] public void Verify_Locating_By_LinkText() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By link text IWebElement gmailLink = driver.FindElement( By.LinkText("Gmail")); //Click gmail link gmailLink.Click(); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
Locating by Partial Link Text
We will find the Gmail link on google home page using the partial link text method
[TestMethod] public void Verify_Locating_By_PartialLinkText() { InternetExplorerOptions options = new InternetExplorerOptions(); options.IntroduceInstabilityByIgnoringProtectedModeSettings = true; options.RequireWindowFocus = true; IWebDriver driver = new InternetExplorerDriver(options); driver.Url = "https://www.google.com/"; //Locate Element By partial link text IWebElement gmailLink = driver.FindElement( By.PartialLinkText("mail")); //Click gmail link gmailLink.Click(); //Wait to see the results System.Threading.Thread.Sleep(5000); //Driver close first instance driver.Quit(); }
That's all I have for this lecture 👱
Comments
Post a Comment