logo logo

Selenium WebDriver 4: New Window, New Tab & Screenshots

main post image

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

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

TestProject TestProject Blog New Window - 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.

TestProject Platform - Powerful Test Automation Tools

TestProject Platform - Powerful Test Automation Tools

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

TestProject Benefits

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).

TestProject Benefits

In the next Selenium 4 article, we are going to look at Relative Locators which find elements near other elements. Stay tuned! 😊

Rex Jones II

About the author

Rex Jones II

Rex Jones II has a passion for sharing knowledge about testing software. His background is development but enjoys testing applications.

Rex is an author, trainer, consultant, and former Board of Director for User Group: Dallas / Fort Worth Mercury User Group (DFWMUG) and member of User Group: Dallas / Fort Worth Quality Assurance Association (DFWQAA). In addition, he is a Certified Software Tester Engineer (CSTE) and has a Test Management Approach (TMap) certification.

Recently, Rex created a social network that demonstrate automation videos. In addition to the social network, he has written 6 Programming / Automation books covering VBScript the programming language for QTP/UFT, Java, Selenium WebDriver, and TestNG.

Join TestProject Community

Get full access to the world's first cloud-based, open source friendly testing community. Enjoy TestProject's end-to-end test automation Platform, Forum, Blog and Docs - All for FREE.

Join Us Now  

Leave a Reply

popup image

Selenium for Teams

Sharing and distributing Selenium tests has never been so easy! With TestProject's FREE Selenium based platform, you can finally create awesome tests with the freedom to collaborate with your team effortlessly.
Sign Up Now right arrow
FacebookLinkedInTwitterEmail