Skip to main content
Cypress Framework Execution Guide

Execution Guide for Cypress Framework

Doris Sooläte avatar
Written by Doris Sooläte
Updated over 3 months ago

Index

This document is intended to be used by Scripters in order to get directions about script creation.

The Scripters should follow all the steps for successful script creation and consequence for a successful automated run.

1. Environment setup

  • In this step, you will configure your environment with all you need.

  • If you need assistance you can contact the coordinator anytime by opening a ticket

2. Script development

  • Write the requested scripts using our guidelines

3. Script validation in Scripter's local machine

  • Validate first your script in your local machine

4. Sandbox Package Run

  • You can use our sandbox to validate the scripts, by creating a run and waiting for the results. Depending on the results you can see if the script needs any fixes or it's ready.

  • If no error is verified in the prior step, please send the test package to the coordinator.

  • If you need assistance you can contact the coordinator anytime by opening a ticket

5. Script validation Testlio

  • In this step, the coordinator will execute it in PRD

6. Script acceptance

  • If no error is detected your script development has been accepted!

If you have any suggestions, related to this document please feel free to give the suggestions to the coordinator anytime.

Have good work!


If you need any help or need to contact the coordinator for any reason, please use this Google Form.

Please read and understand this provided user guide step by step. Also, notify your coordinator through Google Form if additional libraries other than listed are required. For any blockers please submit a ticket through Google Form.

  • Provided below ‘Comment section at the very top of the code with details:

/** 
* Scripter's Name:
* Scripter's Email:
* Script Creation Date:
* Additional Libraries Used and Version:
* Test Case Name: * Test Case Description:
*/
  • Add proper comments for a better understanding of logic/implementations in code.

  • Avoid hardcoded data in the script. Declare all variables and respective values at the beginning of your script.

  • Do not hardcode access credentials in the test code.

  • In Cypress use external private config files instead. For example, you can use file cypress.config.ts with the following content:

e2e: {
specPattern: './cypress/tests/MasterSuite.ts',
supportFile: './cypress/support/e2e.js',
pluginFile: './cypress/plugins/index.js',
experimentalSessionAndOrigin: true,
chromeWebSecurity: false,
pageLoadTimeout: 120000,
numTestsKeptInMemory: 50,

async setupNodeEvents (on, config) {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
const options = {
webpackOptions: require('./webpack.config'),
watchOptions: {},
}}

  • For Lambdatest configurations use, lambdatest_config.json file to set credentials

"lambdatest_auth": {
"username": "username",
"access_key": "access_key"
},
  • Use ‘Suite.xls’ file to add the project , test cases , test data details explained in user guide.

  • Use ‘AppRepository.xls’ file to add object properties details explained in user guide

Prerequisites

To develop desktop web application tests in cypress framework, you need to configure the environment locally as described in the instructions below:

1. Install the following IDE:

o Download Visual Studio Code from their official website.

2. Install Node.js and NPM.

3. Install all node dependencies using

npm i

Create a project

To create a test script compatible with Testlio platform you have to use our framework, containing all the supported libraries by our engine as well as some tools and helper functions which you’re welcome to use during your tests development process. Also, to help you with the process of creating a test automation project, we prepared a template project. Here are the steps, how to use this template project as a starting point:

1. Pull template projects from GitHub: Github - Testlio/Cypress Framework

2. Open Cypress Framework in the IDE.

3. Check that Testlio Website Open Test works fine in your environment by running the tests suite

  • From Cypress UI

npx cypress open
  • From Cypress command line

npx cypress run --browser=chrome

4. If tests are executed successfully, it means that your environment is ready to implement Cypress tests for your desktop web application

Implement Page class

In order to use the locators of specific page, create a page class under Pages folder extending Page class. Locator initialisation and common methods will be declared under this page class.

export default class TestlioGlobalPage extends Page {
get companyLink() : Chainable<JQuery> {
return cy.get('a[title="Company"]');
}
get xCompanyLink() : Chainable<JQuery> {
return this.getElement(appObjMap.appObjsType.get('aboutLink'), appObjMap.appObjectLocators.get('aboutLink'));
}

get signInLink(): Chainable<JQuery> {
return this.getElement(appObjMap.appObjsType.get('signInLink'),
appObjMap.appObjectLocators.get('signInLink'));
}

get emailField(): Chainable<JQuery> {
return this.getElement(appObjMap.appObjsType.get('emailField'),
appObjMap.appObjectLocators.get('emailField'));
}

get passwordField(): Chainable<JQuery> {
return this.getElement(appObjMap.appObjsType.get('passwordField'),
appObjMap.appObjectLocators.get('passwordField'));
}

get loginButton(): Chainable<JQuery> {
return this.getElement(appObjMap.appObjsType.get('loginButton'),
appObjMap.appObjectLocators.get('loginButton'));
}

public routes() {
cy.intercept('GET', '/lead-flows-config/v1/config/json?portalId=*').as('loadFlow');
cy.intercept('POST', 'https://api-iam.intercom.io/messenger/web/ping/fgh').as('launchDarkly');
}

clickAboutLink(): void {
this.mouseOverOnElement(this.companyLink);
cy.wait('@loadFlow');
this.clickOnElementIfVisible(this.xCompanyLink);
}

public signIn(): TestlioProjectPage {
this.clickOnNthMatchingElement(this.signInLink, 1);
this.typeToElement(this.emailField, 'pawan@testlio.com');
this.typeToElement(this.passwordField, 'Delight_2022');
this.clickOnElement(this.loginButton);
return new TestlioProjectPage();
}
}

New test cases will be added under tests folder using the functions from the page class.

import ErrorHandler from "../errorHandler/ErrorHandler";
import TestlioGlobalPage from "../Pages/TestlioGlobalPage"
import TestlioProjectPage from "../Pages/TestlioProjectPage";
let testlioGlobalPage: TestlioGlobalPage = new TestlioGlobalPage();
let testlioProjectPage: TestlioProjectPage;
beforeEach(() => {
ErrorHandler.prototype.handleErrors();
testlioGlobalPage.routes();
})

it("Visit google 2nd time", () => {
cy.visit('www.testlio.com')
//testlioGlobalPage.clickAboutLink();
testlioProjectPage = testlioGlobalPage.signIn();
testlioProjectPage.selectDropdown('Testlio Demo');
cy.wait(20000);
})
Did this answer your question?