DEV Community

Cover image for How to Integrate Cypress with Database in Azure Pipeline for Test cases Execution
Kailash P.
Kailash P.

Posted on

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

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

This blog original publish in https://qaautomationlabs.com/how-to-setup-and-run-cypress-test-cases-in-azure-devops-pipeline-2/

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

Azure free account should be set up already
User already logged into Azure DevOps
Enter fullscreen mode Exit fullscreen mode

Create SQL Database in Azure Cloud

Step 1

Select Create resource from the below screen

Image description

After Login we Can see the below screen
Cypress with Database in Azure Cloud for Test cases Execution

Step 2

Click On “Create” under SQL Database Run cypress test case in Azure Cloud

Image description

Below screen opens after clicking on “Create” database
Cypress with Database in Azure Cloud for Test cases Execution

Image description

Step 3

Provide database name

Image description

Step 4

Click on “Create New” (From the above screen) to create New Server by providing the below details

Image description

Step 5

Create a resource group by clicking on Create new (From below screen)

Image description

Database testing cypress | Cypress with Database in Azure Cloud for Test cases Execution

Step 6

After providing the resource group Click on Review +Create “Database creation” is started (See below)

Image description

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

Image description

On the Home page, we can see the database and resources created

Image description

Step 7

Create Table

Click on Query editor from the below screenshot

Image description

Enter Login/Password

Image description

Cypress with Database in Azure Cloud for Test cases Execution

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

Image description

Cypress with Database in Azure Cloud for Test cases Execution
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

Image description

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);
}

Image description

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": "<userName>",
"password": "<password>",
"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)

Image description

The output of the above run

Here we can see value from the FIRST row is retrieved

Image description

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

///

describe(“Test login functionality : 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();});

});
Output of the test case run

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

Image description

☕️ Happy testing! ☕️

Top comments (0)