<<Previous Post               <<Complete CodeceptJS Tutorial>>               Next Post>>

CodeceptJS – Switching to Tabs

switchToNextTab()                         switchToPreviousTab()

Above are the two commands through which one can switch to the next opened tab or switch to the previous tab accordingly by using relevant commands.

Let’s go through this article to understand it in a better way through a demonstration with a small exercise.

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small exercise on Switching Tabs using switchToNextTab() and switchToPreviousTab() commands in CodeceptJS.

First, I will demonstrate the exercise where we need to click on a link to open a new tab and then switch our focus to the newly opened tab by switchToNextTab() command, Then we will go back to the parent tab by using switchToPreviousTab() command followed by practically demonstrating the CodeceptJS Automation code for achieving it.

Exercise:-

1. Navigate to http://omayo.blogspot.com/

2. Find the Xpath of the hyperlink and click on it, which will open the URL in the New tab.

3. Switch focus to the Parent Tab i.e., on omayo.blogspot.com

4. Switch focus to the next tab i.e., on Selenium143.blogspot.com

Practical Demonstration:

Following are the Steps to Perform the above Exercise (i.e. Switching to Tabs) using CodeceptJS Automation code in ‘Visual Studio Code’ IDE:

Step 1:- Create a Folder named as CodeceptJS_Switching_To_Tabs(You can create a folder with any name)

Open the Git Bash from the above-created folder (In our case ‘CodeceptJS_Switching_To_Tabs’ folder)

Trigger the below command in Terminal :

npm init -y

The above command will create a default package.json file in the ‘CodeceptJS_Switching_To_Tabs’ folder.

Attached Screenshot for Reference:-

Step 2:- Install codeceptjs with webdriverio as a helper. 

Run the below command in Terminal:

npm install codeceptjs webdriverio --save-dev

Step 3:- Generate Configuration File. Since we haven’t created one yet, codeceptJS is smart enough to figure that out and help us through the process.

Run the below command in Terminal:

npx codeceptjs init

Here are the answers I chose: (Move your arrow buttons on the keyboard to select the options and enter)

• Where are your tests located ./*_test.js
• What helpers do you want to use? WebDriver
• Where should logs, screenshots, and reports to be stored? ./output
• Do you want localization for tests? (See https://codecept.io/translation/) English (no localization)
• [WebDriver] Base URL of the site to be tested http://www.omayo.blogspot.com
• [WebDriver] Browser in which testing will be performed chrome

These were the main points i have selected rest you can go through the screenshot given below:-

Verify codecept.conf.js file gets created successfully.

Step 4:- Now Install Selenium standalone service

Run the below command in Terminal:

npm install @wdio/selenium-standalone-service --save-dev

Step 5:- As generated config file doesn’t auto-configure selenium-standalone in its codecept.conf.js file. Open the file in the respective IDE you use, we are using Visual Studio Code as IDE.

wdio: {
     enabled: true,
     services: [“selenium-standalone”]
   }

Step 6:- Write code in the test file. I have written a sample code through which switching to iframe2 will take place and some text will be entered in the text box inside the iframe2 (PS: can be done in multiple ways but I am presenting one of the ways). Use this code and paste it into your test file created during the generation of the config file in Step 3

Feature('switchingToTabs using switchToNextTab and switchToPreviousTab');

Scenario('User should be able to switch to next tab and should be able to switch to previous tab', ({ I }) => {
  I.amOnPage("/");
  I.click("#selenium143");
  I.wait(3);
  I.switchToPreviousTab(0); //Switching back to parent or previous opened tab
  I.wait(3);
  I.switchToNextTab(); //Switching to next opened tab
  I.wait(3);
});

Step 7:- Run your test file to perform the test.

Run the below command in Visual Studio Code Terminal:

npx codeceptjs run

Download the Project from here (Click here to Download) and Unzip it.

Hopefully, your test completed and passed.

Comment ‘Success’ in this post if you are able to practically achieve this exercise.

Next Steps:

> To learn more about CodeceptJS, continue to the next post (Click on Next Post link below)

> Check complete CodeceptJS Tutorial Contents here (Click here)