Playwright and Cucumber Automation using TypeScript: Guide 2 — Enhancing Login Scenarios

Hi Everyone,

I will explain the steps for successful and unsuccessful login scenarios Playwright Test Automation with Cucumber Integration using TypeScript.

Before starting, you can check Playwright and Cucumber Automation using TypeScript: Guide 1 — Installing.

We need to create a login.feature file under the src\test\features folder to write test scenarios that map to the login test cases. These scenarios will describe the behavior we want to test, utilizing Gherkin keywords to provide a high-level description of the software feature and to group related scenarios. For more information.

Feature: User Authentication tests

  Background:
    Given User navigates to the practice application
    And User click on the my account link

  Scenario: Login should be success
    And User enter the username as "Valid Username"
    And User enter the password as "Valid Password"
    When User click on the login button
    Then Login should be success

    
  Scenario: Login should not be success
    And User enter the username as "Invalid Username"
    And User enter the password as "Invalid Password"
    When User click on the login button
    Then Login should be fail

After writing the Gherkin syntax for login scenarios we will create a cucumber.json file in the project’s root directory to generate and customize Cucumber snippets during test execution.

{
    "default": {
        "formatOptions": {
            "snippetInterface": "async-await"
        },
        "publishQuiet": true,
        "dryRun": false,
        "paths": [
            "src/test/features/"
        ],
        "require": [
            "src/test/steps/*.ts"
        ],
        "requireModule": [
            "ts-node/register"
        ]
    }
}

Also, we need to add a script for executing our tests to the package.json file. In this way, we can use npm test to run tests.

  "scripts": {
    "test": "cucumber-js test"
  }

We will create a loginSteps.ts file under src\test\features to add actual code implementations that map to the steps defined in thelogin.feature file.

import { Given, When, Then } from '@cucumber/cucumber';

Given('User navigates to the practice application', async function (){
  console.log("one");
});

Given('User click on the my account link', async function (){
  console.log("two");
});

Given('User enter the username as {string}', async function (username){
  console.log("three");
}); 

Given('User enter the password as {string}', async function (password){
  console.log("four");
}); 

When('User click on the login button', async function(){
  console.log("five");
});

Then('Login should be success',async function () {
  console.log("six");
});

Then('Login should be fail',async function () {
  console.log("seven");
});

Before running, we need to update step and feature path definitions in the cucumber settings. To do this, press Ctrl + Comma, search for Cucumber, and click the ‘Edit in settings.json’ link.

• Update setting.json file as:

    "cucumber.features": [
      "src/test/features/*.feature",
    ],
    "cucumber.glue": [
        "src/test/steps/*.ts"

    ],

When we run our tests from the terminal. It will show one, two .. words that we added with console.log().

npm test

Let's write step definitions in theloginSteps.ts

import { Given, When, Then } from '@cucumber/cucumber';
import {chromium, Page, Browser, expect } from "@playwright/test";

let browser: Browser;
let page: Page;

Given('User navigates to the practice application', async function (){
  browser = await chromium.launch({headless: false});
  page = await browser.newPage();
  await page.goto("https://bookcart.azurewebsites.net/");
});

Given('User click on the my login link', async function (){
 //await page.goto("https://bookcart.azurewebsites.net/login"); OR
 await page.locator("(//span[text()='Login'])[1]").click();
});

Given('User enter the username as {string}', async function (username){
  await page.locator("input[formcontrolname='username']").type(username);
}); 

Given('User enter the password as {string}', async function (password){
  await page.locator("input[formcontrolname='password']").type(password);
}); 

When('User click on the login button', async function(){
  await page.locator("button[color='primary']").click();
});

Then('Login should be success',async function () {
  const profileName =await page.locator("//button[contains(@class,'mat-focus-indicator mat-menu-trigger')]//span[1]");
  await expect(profileName).toBeVisible(); 
  await browser.close();
});

Then('Login should be fail',async function () {
  const errorMessage = await page.locator("mat-error[role='alert']");
  await expect(errorMessage).toBeVisible();
  await browser.close();

});

Now, we can use a similar approach to create additional test scenarios. We might continue creating feature files for other functionalities or additional scenarios related to the login process.

Thank you for reading 🙌 🚀

Reference: https://youtu.be/-HQ8n8Fykdk?si=OsxU6b19eTEZ6KXx