[Demo & Integration] Katalon and Cypress Integration

Integrations
, ,
1

:information_source: This is Part 6 of our Demo & Integration series. Read Part 5 here: http://forum.katalon.com/t/demo-integration-handling-shadow-dom-with-katalon-studio/87959?u=albert.vu

Today we will take a look at the Katalon and Cypress Integration video

:pushpin: Clicking on the thumbnail above will open a new tab

For this demo, we will be using the Git Repository below …

… follow the steps below to get started:

To execute code from the repository above

Step 1: Clone the git repo

Step 2: Go inside the project by typing in cd Katalon-Cypress-Integration in the Terminal

Step 3: Execute the command cd cypress && npm install && npm test

:information_source: Note: Please make sure that Cypress and Node are already installed on your machine.

Performing integration by creating a project from scratch

Step 1: Create a new folder which will host your Cypress project e.g. Cypress Demo

Step 2: Go inside that folder by typing in cd Cypress Demo in the Terminal.

Step 3: Run npm init so that said folder will get the package.json file.

Step 4: Read through this documentation from Cypress before proceeding to Step 5 - Install using npm, Yarn, or pnpm | Cypress Documentation | Cypress Documentation

Step 5: Open Cypress using the command npx cypress open in the Terminal.

Step 6: Create a new spec file and name it as EndtoEnd.spec.js, then open and edit that spec file in the VS Code application, and ensure that the test script is already up and running.

Step 7: Go inside the package.json file and add the following lines under the “scripts” and “dev dependencies” sections respectively:

scripts 
"scripts":{
   "build": "tsc",
   "test": "node cypress-cli.js"
}
dev dependencies 
"devDependencies":{
   "cypress": "^10.9.0",
   "@tsconfig/node10": "^1.0.9",
   "typescript": "^4.1.3"
},
"dependencies":{
   "@katalon/testops-cypress": "^1.2.2" 
}

Step 8: Copy the testopsconfig.json file from GitHub - katalon-studio/testops-report-js: Katalon TestOps JavaScript Reporters and the Cypress - cli file.

Step 9: Run the following command to execute cd cypress && npm install && npm test

Thanks for reading! :sunglasses:

:pushpin: See the rest of our Demo & Integration videos here.
:pushpin: You can find similar topics to this one by searching for the tag demo-integration

2 Likes