How to Integrate Cypress with Database in Azure Pipeline for Test cases Execution
Tags: javascript, azure, cypress, database
Published: 2022-09-25 06:06:28

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

Create SQL Database in Azure Cloud

Step 1

Select Create resource from the below screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/832epbtu52qmyglo0s2n.png)



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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qjtdhdy400pfuf6u561.png)



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsk0h9p2pslspnztw632.png)



Step 3

Provide database name


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlorszbmtgbkexcsypxh.png)



Step 4

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46ggbvvpqx90gw1tnz4j.png)



Step 5

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnl85w26r9081ov9dtaz.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93nr4wnud8n7cbyzz02f.png)



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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4s3b5hcyvjeodaxom17c.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekxgzj57sl5h3biyg9xt.png)



Step 7

Create Table

Click on Query editor from the below screenshot

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe6wggv8jiiynwepsg6c.png)



Enter Login/Password

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umedc0vgv2cl32sdrs5h.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfsrqqsgre6pibiczsmy.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0pssc55e0pois2n693c.png)


**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2naydicul55gtmle9lb0.png)



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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8rkrbaxwtbw0reqiffg.png)



The output of the above run

Here we can see value from the FIRST row is retrieved

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e935uj3ixmny4s0htyi5.png)



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 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynsidt1adlki1kk80z28.png)

☕️ Happy testing! ☕️