Selenium WebDriver 4: New Window, New Tab & Screenshots

In this 2^nd Selenium 4 article, we are going dive into three Selenium WebDriver 4 features. The 1^st Selenium 4 feature is switching focus to a new browser window. The 2^nd 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 3^rd 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

1. New Selenium 4 Features (Chapter 1)
2. You’re here → Selenium WebDriver 4 (Chapter 2)
   • New Window
   • New Tab
   • WebElement Screenshot
3. 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.

1. Execution loads TestProject’s Home page via driver.get(“https://testproject.io/”).
2. A blank window page opens after executing the newWindow API driver.switchTo().newWindow(WindowType.WINDOW).
3. After opening a new window, the next statement loads TestProject’s Blog page in the window via newWindow.get(“https://blog.testproject.io/”).
4. 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:

1. Built On Open Source
2. Community Powered
3. Selenium & Appium Ready
4. 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 1^st step which finds the WebElement section.
• The 2^nd 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! 😊