In this 2nd Selenium 4 article, we are going dive into three Selenium WebDriver 4 features. The 1st Selenium 4 feature is switching focus to a new browser window. The 2nd Selenium 4 feature is switching focus to a new tab. We can carry out both features using syntax newWindow(WindowType typeHint). The benefit of switching focus to a new window or new tab is opening either one of them on a different page then completing an action.
With Selenium 3.x, there is an Interface called TakesScreenshot that facilitates taking a screenshot of the entire web page. The getScreenshotAs() method captures the screenshot and stores the screenshot in a specified location. Storing the screenshot for later use is carried out using the File class.
Our 3rd Selenium 4 feature provides a complementary function of the entire page but takes a screenshot of a specific WebElement. By the end of this article, you will read how to switch focus to a new window, new tab, and take screenshot of a WebElement. Code will be located on GitHub https://github.com/RexJonesII/TestProject-TestNG.
Tutorial Chapters – Selenium WebDriver 4: New Window, New Tab & Screenshots
- New Selenium 4 Features (Chapter 1)
- You’re here → Selenium WebDriver 4 (Chapter 2)
- Relative Locators (Chapter 3)
New Window
Selenium 4 provides new ways to handle a window. We have better control by opening a new window then automatically switching to the window. The new API is convenient because it simplifies our code. Now, we write fewer lines of code to interact with an element. The following is an example of Selenium’s 4 newWindow() method to open a new Window for TestProject’s Blog page.
public class SwitchToNewWindow { WebDriver driver; @BeforeClass public void setUp () { WebDriverManager.chromiumdriver().setup(); driver = new ChromeDriver (); driver.get("https://testproject.io/"); driver.manage().window().maximize(); System.out.println(driver.getTitle()); } @Test public void openNewWindowForTestProjectBlog () { WebDriver newWindow = driver.switchTo().newWindow(WindowType.WINDOW); newWindow.get("https://blog.testproject.io/"); System.out.println(driver.getTitle()); } }
In the @Test annotation, the Selenium statement driver.switchTo().newWindow(WindowType.WINDOW) is assigned to WebDriver newWindow. The key part is newWindow(WindowType.WINDOW) which sends a command to open a new window page. Let’s walkthrough the Test Script in detail starting with the setup method: @BeforeClass Configuration Annotation.
- Execution loads TestProject’s Home page via driver.get(“https://testproject.io/”).
- A blank window page opens after executing the newWindow API driver.switchTo().newWindow(WindowType.WINDOW).
- After opening a new window, the next statement loads TestProject’s Blog page in the window via newWindow.get(“https://blog.testproject.io/”).
- Interaction is performed on the page by getting and printing the title via driver.getTitle().
The following screenshots show 2 separate windows along with a print statement for each page title. TestProject’s Home page and Blog page open with PASSED in the Console. The print statements are Free Test Automation For All – TestProject and Test Automation Blog | TestProject.
New Tab
The newWindow API offers control over a tab just like a window. It’s the same API so the tab and window function similar to each other but with a different WindowType. WindowType represents the type of new browser window that will be created upon execution.
- WindowType to create a new tab is TAB.
- WindowType to create a new window is WINDOW.
Here’s the code snippet to set up TestProject’s Home page, then open the Platform page in a separate tab.
public class SwitchToNewTab { WebDriver driver; @BeforeClass public void setUp () { WebDriverManager.chromiumdriver().setup(); driver = new ChromeDriver (); driver.get("https://testproject.io/"); System.out.println(driver.getTitle()); } @Test public void openNewTabForTestProjectPlatform () { WebDriver newTab = driver.switchTo().newWindow(WindowType.TAB); newTab.get("https://testproject.io/platform/"); System.out.println(driver.getTitle()); } }
Notice, this time, the Selenium statement is driver.switchTo().newWindow(WindowType.TAB) and assigned to WebDriver newTab. Initially, the new tab is opened as a blank page, then loads the Platform page via newTab.get(“https://testproject.io/platform”). Here’s a couple of screenshots that show the new tab and Console displaying PASSED with print statements. The print statements are Free Test Automation For All – TestProject and Powerful Test Automation Tools – TestProject.
WebElement Screenshot
The process for taking a WebElement screenshot consists of finding a specific WebElement then capturing the screenshot. A WebElement is anything we see on a web page. Therefore, Selenium 4 can get a screenshot of a field, button, link, etc. Also, we are permitted to take a screenshot of a section if the section is a WebElement.
TestProject has a section on its Home page that list 4 Key Benefits and details of each benefit:
- Built On Open Source
- Community Powered
- Selenium & Appium Ready
- Supercharged with Addons
The following code snippet takes a screenshot of all 4 benefits which is a WebElement section:
public class TakeWebElementScreenshot { WebDriver driver; @BeforeClass public void setUp () { WebDriverManager.chromedriver().setup(); driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get("https://testproject.io/"); } @Test public void takeTestProjectBenefitsScreenshot () { JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollBy(0,650)"); driver.findElement(By.id("cc-button")).click(); WebDriverWait wait = new WebDriverWait(driver, 5); wait.until(ExpectedConditions.visibilityOfElementLocated (By.xpath("//div[@id='mm-0\']/div[1]/section[1]/div/div[2]"))); WebElement benefitsTestProject = driver.findElement (By.cssSelector(".section-benefits")); File source = benefitsTestProject.getScreenshotAs(OutputType.FILE); File destination = new File(System.getProperty("user.dir") + "/src/test/java/io/testproject/blog10/TestProject Benefits.png"); try { FileHandler.copy(source, destination); } catch (IOException exc) { exc.printStackTrace(); } System.out.println("Screenshot Located At " + destination); } }
Here’s a breakdown of important lines in the code snippet followed by a screenshot of the WebElement section:
- WebElement benefitsTestProject = driver.findElement(By.cssSelector(“.section-benefits”)) is the 1st step which finds the WebElement section.
- The 2nd step is capturing a screenshot via code line File source = benefitsTestProject.getScreenshotAs(OutputType.FILE).
- Next, is adding your desired location to place the screenshot: File destination = new File(System.getProperty(“user.dir”) + location.png).
- The final step is placed within a try–catch block to copy the screenshot from its source to your destination via FileHandler.copy(source, destination).
In the next Selenium 4 article, we are going to look at Relative Locators which find elements near other elements. Stay tuned! 😊