How to integrate Cypress with Database in Azure Pipeline for Test cases Execution

Run Cypress test case with Database in Azure Pipeline

Blog cover about integrating Cypress with Database in Azure Cloud for Test cases Execution

Pre-request

1. Azure free account should be set up already
2. User already logged into Azure DevOps

Create SQL Database in Azure Cloud

Step 1 Select Create resource from the below screen

After Login we Can see the below screen

Step 2 Click On “Create” under SQL Database

Below screen opens after clicking on “Create” database

Step 3 Provide database name

Step 4 Click on “Create New” to create New Server by providing below details

Step 5 Create a resource group by clicking on Create new

Step 6 Click on Review +Create “Database creation” is start

After a few min deployments is done we can see in the below screen

In-Home page we can see the database and resources created

Step 7 Create Table

Click on Query editor from the below screenshot

Enter Login/Password

Create a query with two fields email id, and password (these two fields we will use in login into Cypress)

CREATE TABLE testyou(Login_Id varchar(255),password varchar(255));

Once the table is created we can see it by expanding

Step 8 INSERT data into the table

INSERT INTO testyou (Login_Id,password)VALUES (‘xxxx’,’xxx');

INSERT INTO testyou (Login_Id,password)VALUES (‘ZZZ’,’ZZZ’);

Table with data created

NOTE: The site we using for testing is http://www.testyou.in/Login.aspx

Install Cypress and other Plugin

Step 1 Install Cypress Refer to the link

https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install

Step 2 Install Cypress DB plugin

npm install --save-dev cypress-sql-server

Plug-in can be initialized in your cypress/plugins/index.js file as below.

const sqlServer = require('cypress-sql-server');
const dbConfig = require("../../cypress.json");
module.exports = (on, config) => {
  tasks = sqlServer.loadDBPlugin(dbConfig.db);
  on('task', tasks);
}

Step 3 Under support/index.js add the below line

The extension provides multiple sets of commands. You can import the ones you need. Example support/index.js file.

import sqlServer from 'cypress-sql-server';
sqlServer.loadDBCommands();

*Step 4 Update Your cypress.json

Update cypress.json with the below line

"db": {
    "userName": "qatube",
    "password": "Qa@tube123",
    "server": "qatube.database.windows.net",
    "options": {
        "database": "QATube",
        "encrypt": true,
        "rowCollectionOnRequestCompletion" : true
    }
}

*Step 5 Create a .spec file to call value from DB (Configure in DB)

Output of above run

Here we can see value from the FIRST row is retrieved

Step 6 Now we have to use this Data in TEST Case to login into the site

Create a test case login_page.spec.js

/// <reference types=”cypress” />

describe(“Test login funcationlity : login into the application and logout “, () => {

let data;

before(() => {

cy.visit(“http://www.testyou.in/Login.aspx");

cy.sqlServer(“Select *from testyou”).then(function (result) {

data = result;});});

it(“Login Into Application”, () => {

cy.get(“#ctl00_CPHContainer_txtUserLogin”).type(data[0][0]); // Assign data from DB

cy.get(“#ctl00_CPHContainer_txtPassword”).type(data[0][1]); // Assign data from DB

cy.get(“#ctl00_CPHContainer_btnLoginn”).click();});

it(“Logout From Application”, () => {

cy.get(“#ctl00_headerTopStudent_lnkbtnSignout”).click();});

});

Out-put of the test case run

We can see in logs, Login id and password values are coming from Azure SQL Server DB

Link is attached below

For detail and more on Cypress blog see the below link

Blogs - QAAutomationLabs

Please follow … me… on medium. Coming soon with some more awesome blogs