DEV Community: Bushra Alam

Say Hello to Playwright

Bushra Alam — Wed, 16 Dec 2020 12:35:01 +0000

Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. It is a Node library to automate chromium, firefox and webkit with a single API. It is developed by Microsoft and is open source.

And guess what? It is developed by the same team that developed Puppeteer. So Playwright offers everything that puppeteer did plus a lot more - it supports all popular browsers, the API is testing friendly, provides lean parallelization with browser context - to mention a few. The team says they have incorporated the lessons learned from Puppeteer, which says a lot about the tool.

I have recently published a full course on Playwright:
Web Automation and Testing using Playwright (This is a limited time discount link)

Why Playwright
Playwright Installation
Core Concepts
Basic Script
Playwright API
- Navigation
- Identifying Web Elements
- Interacting with Web Elements
End-to-End Testing with Playwright

Why Playwright

Here are some reasons why you should consider Playwright:

Support for all browsers and both headful and headless modes
Supports multiple languages- JavaScript, TypeScript, Python, C# and Go
Fast and reliable execution
Powerful automation capabilities that support modern web features
Run multi-page emulation scenarios
Integrates with your workflow

Back to table of contents

Playwright Installation

Playwright has a one-step-setup. The following command will install Playwright in your project:

npm install playwright

Back to table of contents

Core Concepts

Browser Type

A browserType needs to be selected. The browserType could be chromiun, firefox or webkit.

const { firefox } = require('playwright');

Browser Instance

Using the browserType's launch method, create a browser instance of that browserType.

const browser = await firefox.launch();

Browser Context

Then start a new browser context. Browser Contexts provide a way to operate multiple independent browser sessions.

const context = await browser.newContext();

Page

Using this context create pages. A page is essentially a tab in the browser or a pop up window. Multiple pages can be created using a single browser context.

const page = await context.newPage();

Page provides methods to interact with the elements on the page.

Finally, close the browser instance.

await browser.close();

Back to table of contents

Basic Script

Here is a basic Playwright script that opens a firefox browser, navigates to example.com and then closes the browser instance:

const { firefox } = require('playwright');
(async () => {
   const browser = await firefox.launch();
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto('https://example.com')
   await browser.close();
})()

Back to table of contents

Playwright API

Playwright API provides various methods to perform operations like navigating to a webpage, identifying and interacting with web elements and so on.

Navigation

Here are the most commonly used navigation related methods:

// Navigate to a specific url
await page.goto(url)

// Go back in browser's history
await page.goBack()

// Go forward in browser's history
await page.goForward()

// Reload a page
await page.reload()

Identifying Web Elements

Identifying web elements is critical to any web automation tool. Playwright provides two methods to identify elements.

// Find an element matching the specified selector
await page.$(selector)

// Find all elements matching the specified selector
await page.$$(selector)

The selector could be a CSS selector, XPath selector, HTML attribute or text content. Understanding how to efficiently and uniquely identify your elements in an art that must be mastered to produce reliable scripts. The full course on Playwright will help you become better at it. Again, here is the limited time discount link for the course: Web Automation and Testing using Playwright

Interacting with Web Elements

Here are the methods for the most commonly used interactions with web elements:

// Click on an element
await page.click(selector)

// Input some text
await page.fill(selector, value)

// Check a checkbox
await page.check(selector)

// 'Uncheck a checkbox
await page.uncheck(selector)

// Focus on an element
await page. focus(selector)

Each of these methods have some optional parameters and there are many more methods for interacting with web elements.

Back to table of contents

End-to-End Testing with Playwright

You can plug-in popular JavaScript test runners with Playwright. You can use Jest/Jasmine, AVA or Mocha.

Jest-Playwright is especially popular for writing tests.

Here is a sample test:

beforeAll(async () => {
  await page.goto('https://whatismybrowser.com/')
})

test('should display "google" text on page', async () => {
  const browser = await page.$eval('.string-major', (el) => el.innerHTML)
  expect(browser).toContain('Chrome')
})

jest-playwright is a powerful framework to use to write tests.

Back to table of contents

Full course on Playwright:
Web Automation and Testing using Playwright (This is a limited time discount link)

JavaScript For Testers

Bushra Alam — Thu, 14 May 2020 09:10:31 +0000

JavaScript is one of the most popular programming languages today. Here is a StackOverflow Survey Result showing popularity of various languages:

Testers might feel they won't be impacted by this but there are a lot of automation testing tools coming in the market which are based on JavaScript like Cypress, Protractor, Nightwatch, Puppeteer to name a few. You will have to learn JavaScript sooner or later. And I say, the sooner - the better.

If you prefer to watch and learn, hop on to my JS For Testers series on Youtube
Subscribe to my Youtube Channel - QA Camp!

What is JavaScript?
Install Node.js and Code Editor
JavaScript Basics
- Variables
- Constants
- Conditional Operators
- Loops
- Functions
NPM - Node Package Manager
- package.json
- NPX
Arrow Functions

What is JavaScript?

JavaScript was initially created to “make web pages alive” and it was capable of running only in a web browser. Because browsers have JavaScript engine to execute JavaScript code.
But now, with the development of Node.js, JavaScript isn't restricted to only browsers.
Node is a JavaScript runtime environment that executes JavaScript code outside of a browser. Node.js is built on top of Chrome's open-source V8 JavaScript engine.

So now JS could be used as front-end (client-side) as well as back-end (or the server-side) language.

Install Node.js and Code Editor

Installing Node.js is essential and having a code editor provides so much of ease.

You can download Node.js from here: https://nodejs.org/en/download/

For code editor, you have got a number of options to choose from. But I recommend using Visual Studio Code.
You can download VS Code from here: https://code.visualstudio.com/download

To see installation in action you can follow my video:

JavaScript Basics

Let's learn how to create variables, constants, conditional operators, loops and functions in JS.

Variables

Variables are like named boxes that can hold value. These values can also be updated.

Variables in JS can be created using let keyword



let age = 30

Note that we haven't mentioned any datatype and so our variable 'age' isn't bound to any datatype. And so, we can have it hold value of any data type.



age = 'thirty'

Now, the variable holds a string instead of a number and JS won't complain.

Constants

Constants are variables whose value can't be updated. Constants can be created using const keyword.



const firstName = 'John'

Conditional Operators

Conditional Operators are used when you would like to execute a piece of code only when a condition satisfies.

1. IF



let ageMoreThank18
if (age > 18){
    ageMoreThank18 = true
}
else{
    ageMoreThank18 = false
}

2. ?



ageMoreThank18 = (age > 18) ? true : false

Here, in both the cases, the variable 'ageMoreThank18' would be set to true if the variable 'age' has value greater than 18 else the variable 'ageMoreThank18' would be set to false.

Loops

Loops are used when you would like to execute a piece of code as long as the condition stays true.

1. WHILE LOOP



let i = 0
while (i < 5){
    console.log('i is now : '+ i)
    i++
}

2. FOR LOOP



for (i=0; i<5; i++){
    console.log('i is now : '+ i)
}

Here, in both the cases, the code in the loop body would be executed until i has value less than 5. As soon as i is set to 5, the loop condition would return false and the loop body wouldn't execute.

Functions

Functions are essential in any programming language. They take an input, process it and return an output.



function product (a,b){
   return a * b
}

This is a function named 'product' that takes two values as input, multiplies them and return the result i.e. the product of two numbers.

To call the function:



product(5, 4)

NPM - Node Package Manager

NPM is a very important concept in JavaScript and NPM is one of the most crucial factors behind the success of JavaScript.

NPM is Node Package Manager. Before understanding NPM, let's understand what a package manager is and before that - what are packages?

So, when you start a new project.. be it a development or testing project, you will almost never start from the blank slate and just never would you finish the project with having written 100% of the code yourself.
Imagine this.. you need to test an application.. the first things that you do is pick a tool, select a framework, think what reporting plugin you could use and so on. So these tools, frameworks, plugins that are available for you to pick and use in any project are Packages.

Now, there could be hundred or thousands of such packages in a language. So to manage how they would be published, installed, where would be store and things of that sort we need a Package Manager.

JS has many package managers. The two most popular are: NPM and Yarn.
NPM is the default package manager for JS. NPM is the world's largest software repository having more than a million packages.

NPM consists of three things:

the registry: for storing open-source JS projects
the command line interface: for publishing and installing packages
the website: for searching packages - https://www.npmjs.com

NPM is installed along with Node.js.
To verify NPM is installed, run:



npm -v

If you see a version then NPM is installed on your machine.

package.json

package.json is the heart of NPM. It is a JSON format file that contains the list of packages that your project depends on.

A 'package.json' file provides these benefits:

it contain the list of packages your project depends on
it specifies the versions of those packages
it makes your build reproducible

Add package.json file to your project



npm init
or
npm init -y

Install a package



npm install <packageName>

Following things happen when you install a package:

an entry is made in the package.json
the package and its dependencies are downloaded in the node modules folder
package-lock.json file makes entries of all the dependencies of package installed and their versions

To understand these concepts better, I highly recommend to watch the video (https://youtu.be/Yj4CNIMHn5E) [https://youtu.be/Yj4CNIMHn5E].

To install all the dependencies listed in package.json



npm install

To install dependencies as devDependencies:



npm install <packageName> --save-dev

devDependencies: packages that are necessary only while development and not necessary for the production build

NPX

NPX could be though as Node Package Runner. It is a very powerful concept. Here are a few benefits it provide:

Easily run local commands
Installation-less command execution
Run some code using a different Node.js version
Run arbitrary code snippets directly from a URL

Watch the video for more details on these benefits:

Arrow Functions

Arrow Functions are a very popular concept of JavaScript and they are very commonly used. If you are unaware of the syntax then they might confuse you and so it's better to familiarize yourself with them.

Follow the video for examples on each of these syntax:

More content to be added soon...

Please suggest topics that you would like to see in this series.

If you prefer to watch and learn, hop on to my JS For Testers series on Youtube
Subscribe to my Youtube Channel - QA Camp!

BDD and Cucumber

Bushra Alam — Sat, 21 Mar 2020 06:27:59 +0000

Cucumber is a tool that facilitates BDD. And so let's first see what BDD is.

BDD

BDD is Behavior Driven Development.

BDD is a collaborative way of working for teams so that the gap between business people and technical people is reduced to achieve shared understanding of the system to be built.

BDD is a collection of practices that is build upon agile ways of working. BDD comprises of three steps (done repeatedly):
Discover - Discover the behavior of the system
Formulate - Formulate the specification in business-readable language
Automate - Automate the formulated specification to verify that the system actually behaves as expected.

CUCUMBER

Cucumber is a test automation tool that supports Behavior Driven Development (BDD).
Let's understand each of the BDD steps and see where Cucumber fits in.

Discover

For Discovery we arrange what is called 'Three Amigos Meeting'. The three amigos are: Product owner, developer and tester.
They sit together, discuss a business requirement (user story), illustrate with examples, ask and answer as many questions as they can. At the end of the meeting, all the three amigos should be on the same page i.e have the shared understanding of the user story.

Formulate

The next step is Formulation, which involves creating a document containing multiple scenarios for a given business requirement or feature that has crossed the discovery phase. The document needs to be such that it could easily be understood by the three amigos as well as by Cucumber. Now because the document has to be in the business-readable language (for amigos) that could also be executed (by cucumber), a special language called Gherkin is used.
The document is called Feature file. It typically contains multiple scenarios (test cases) for one feature and looks something like this:

Feature: Process refunds
  Scenario: Customer has their receipt
    Given the customer has purchased a kettle for €10
      And they have their receipt
     When the sales assistant processes the refund
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

Automate

Once a feature file has been created for a business requirement or a feature, the final step is Automation. To automate the scenarios Step Definition files are created. It has a function corresponding to each 'Given', 'When', 'Then' of each scenario specified in the Feature file.

So, Cucumber is a tool that understands documents written in Gherkin syntax and helps to automate them through Step Definition files.

Setup

Let's setup Cucumber and get our hands dirty.

Pre-Setup

Download and Install a Programming Language - Cucumber supports many languages like Java, JS, Ruby and more. We have picked Java for this tutorial.
Download and setup a build tool - We will be using Maven
Download and Install an IDE
Create a Maven quickstart project

Setup Cucumber

Add the following dependencies in pom.xml

        <dependency>
            <groupId>info.cukes</groupId>
            <artifactId>cucumber-java</artifactId>
            <version>1.2.6</version>
        </dependency>
        <dependency>
            <groupId>info.cukes</groupId>
            <artifactId>cucumber-junit</artifactId>
            <version>1.2.6</version>
            <scope>test</scope>
        </dependency>

Feature File

To start with a Cucumber project, the first step is to create a Feature file. Feature files have .feature extension and are written in Gherkin language.

Gherkin

Lets quickly see what Gherkins is.

Scenarios written in Gherkin could be read and understood easily by the business owner, developer and tester as they are basically plain english sentences.
Infact Gherkin is localized for over 70 spoken languages.
Gherkin is understood and could be executed by Cucumber
Each line must start with a Gherkin keyword.
- The primary keywords are:
  - Feature
  - Rule (as of Gherkin 6)
  - Scenario or Example
  - Given, When, Then, And, But (steps)
  - Background
  - Scenario Outline or Scenario Template
  - Examples
- There are a few secondary keywords as well:
  - """ (Doc Strings)
  - | (Data Tables)
  - @ (Tags)
  - # (Comments)

Let's see what each of these keywords are used for:

Feature: provide a high-level description of a software feature, and to group related scenarios.

Rule: represent one business rule that should be implemented. It provides additional information for a feature.

Scenario or Example: This is a concrete example that illustrates a business rule. It consists of a list of steps.

Each step starts with Given, When, Then, And, or But.

Given: the initial context of the system - the scene of the scenario.

When: an event, or an action. This can be a person interacting with the system, or it can be an event triggered by another system.

Then: an expected outcome, or result.

And, But: If you have successive Given’s, When’s, or Then’s, you could use And or But based on the context.

Background: add some context to the scenarios in the feature.

Scenario Outline: to run the same Scenario multiple times, with different combinations of values.

Examples: A Scenario Outline must contain Examples section containing all the different values to run the Scenario Outline with.

We will learn about secondary keywords as we work with them in a while

Let's see a simple scenario:

Feature: Process refunds
  Scenario: Customer has their receipt
    Given the customer has purchased a kettle for €10
      And they have their receipt
     When the sales assistant processes the refund
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

This is very straight forward - technical as well as nontechnical person can understand this. This is the beauty of Gherkin.

Step Definition

To run the scenarios in the feature file, a step definition file with a function for each Given, When, Then is required.

@RunWith(Cucumber.class)
public class MyStepDefinitions {

    @Given("^the customer has purchased a kettle for €10$")
    public void the_customer_has_purchased_a_kettle_for_10() {
        //code
    }

    @When("^the sales assistant processes the refund$")
    public void the_sales_assistant_processes_the_refund() {
        //code
    }

    @Then("^the stock inventory for kettles is incremented by 1$")
    public void the_stock_inventory_for_kettles_is_incremented_by_1() {
        //code
    }

    @And("^they have their receipt$")
    public void they_have_their_receipt() {
        //code
    }

    @And("^the customer's card is credited with €10$")
    public void the_customers_card_is_credited_with_10() {
        //code
    }

}

Passing Data

Let's now see how to pass data to these scenarios.

1. Regular Expression

Regular Expressions could be used when multiple scenarios are similar but they work with different data.
Say, for example, for Feature 'Process refund', you have a scenario where customer has their bank statement claiming they purchases a kettle for €10 from the store. In this case you would like to reuse the following function and not create a fresh one for 'bank statement'

    @And("^they have their receipt$")
    public void they_have_their_receipt() {
        //code
    }

The Feature file would look something like this:

Feature: Process refunds
  Scenario: Customer has their receipt
    Given the customer has purchased a kettle for €10
      And they have their "receipt"
     When the sales assistant processes the refund
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

  Scenario: Customer has their bank statement
    Given the customer has purchased a kettle for €10
      And they have their "bank statement"
     When the sales assistant processes the refund
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

The function 'they_have_their_receipt()' in Step Definition would change to Regular Expression:

    @And("^they have their \"([^\"]*)\"$")
    public void they_have_their_something(String strArg1) {
        //code
    }

2. Data Table

When you have multiple parameters to pass to the function

Feature File:

Feature: Process refunds
  Scenario: Customer has their receipt
    Given the customer has purchased a kettle for €10
      And they have their receipt
     When the sales assistant processes the refund
      And user fills the process refund form
      | John | Smith | US | 987654321 | 
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

The function in Step Definition would look like this:

    @And("^user fills the process refund form$")
    public void user_fills_the_process_refund_form(DataTable data) { 
        //To access the values
        List<List<String>> obj = data.raw();
        System.out.println(obj.get(0).get(0)); // 1st row, 1st column
        System.out.println(obj.get(0).get(1)); // 1st row, 2nd column
        System.out.println(obj.get(0).get(2)); // 1st row, 3rd column
        System.out.println(obj.get(0).get(3)); // 1st row, 4th column       
    }

3. Scenario Outline & Example keyword

Use when you want to run the same scenario with multiple data sets

Feature File:

Feature: Process refunds
  Scenario Outline: Customer has their receipt
    Given the customer has purchased something
      And they have their receipt
     When the sales assistant processes the refund
     Then the stock inventory for <product> is incremented by <quantity>
      And the customer's card is credited with €<price>

    Examples: 
      | product | quantity | price | 
      | kettle  | 1        | 10    | 
      | cup     | 6        | 50    | 
      | mug     | 2        | 30    | 
      | glass   | 12       | 40    |

Following two functions in Step Definition would be updated:

    @Then("^the stock inventory for (.+) is incremented by (.+)$")
    public void the_stock_inventory_for_is_incremented_by(String product, String quantity) {
        System.out.println(product);
        System.out.println(quantity);
    }

    @And("^the customer's card is credited with €(.+)$")
    public void the_customers_card_is_credited_with_(String price) {
        System.out.println(price);
    }

Tagging

You can tag your scenarios. Tagging a scenario helps you to run only the scenarios that belong to a certain tag.
You can have multiple tags for a single scenario
You can run multiple tags together

Feature: Process refunds
  @RegressionTest
  Scenario: Customer has their receipt
    Given the customer has purchased a kettle for €10
      And they have their receipt
     When the sales assistant processes the refund
     Then the stock inventory for kettles is incremented by 1
      And the customer's card is credited with €10

Executing Test

To run the feature files, an empty class is created with @RunWith(Cucumber.class) annotation. All the configurations are put in the @CucumberOptions.

   @RunWith(Cucumber.class)
   @CucumberOptions(
        features = "src/test/java/features",    // feature files to run
        glue = "stepDefinitions",       // step definitions
   )
   public class RunTest 
   {
        // This class will be empty 
   }

@CucumberOptions can have many more configurations, for example:
tags — to run only the scenarios with specified tags
plugin — to specify different formatting options for the output reports
dryRun = true — to check if you have stepdefinition for each line in your feature file
monochrome = true — to receive clean and readable output in your console
strict = true — to receive errors for things like missing step definition instead of just passing the scenarios and marking those steps as skipped

   @RunWith(Cucumber.class)
   @CucumberOptions(
        features = "src/test/java/features",    // feature files to run
        glue = "stepDefinitions",       // step definitions
        tags = "@RegressionTest, @SanityTest",
        plugin = {"pretty", "html:target/htmlreport", "json:report.json", "junit:report.xml"},
        dryRun = true,
        monochrome = true,
        strict = true
   )
   public class RunTest 
   {
        // This class will be empty 
   }

Learn how to integrate Cucumber with Cypress

Introduction to Testing with Mocha and Chai

Bushra Alam — Sat, 14 Mar 2020 06:07:14 +0000

In this quick tutorial we will learn what Mocha and Chai are and how to make use of them to test our JavaScript code.
And in case you are fascinated with Cypress (like we are!) then that's another good reason to explore them as Mocha and Chai are hand picked and integrated in Cypress.

If you prefer to watch and learn, hop on to our JS for Testers series on Youtube
Subscribe to my Youtube Channel - QA Camp!

Mocha

Mocha is a JavaScript test framework.
Mocha can be used for both browser-based testing and Node.js testing

Installation

Prerequisite (for both Mocha and Chai):
We need to install Node.js because we need npm (to install mocha and chai) which gets downloaded along with node.js.
You can download node.js from here: https://nodejs.org/en/download/
Once download is complete, launch and run through the installer.
To verify successful installation check the version:

node -v
npm -v

Install Mocha

Once npm is installed, you can Install Mocha either globally or as a development dependency for your project:

npm install --global mocha

npm install --save-dev mocha

Mocha Basic Spec

describe('Basic Mocha String Test', function () {
 it('should return number of charachters in a string', function () {
        ....
    });
 it('should return first charachter of the string', function () {
       ....
    });
});

A test file is called a 'Spec'. Spec is short for 'Specification'. Specification in terms of a test refers to the technical details of a given feature or application which must be fulfilled.

describe() and it() form the backbone of Mocha.

describe() - collection of individual tests It takes two parameters, first one is the meaningful name to functionality under test and second one is the function which contains one or multiple tests. describe() can be nested.
it() - an Individual Test It takes two parameters, first parameter is name to the test and second parameter is function which holds the body of the test.

You can skip an individual test (it()) or a collection of tests (describe()) and can also specify to run a single test or a collection of tests using .skip and .only

describe('Array', function() {
  describe('#indexOf()', function() {
    it.skip('should return -1 unless present', function() {
      // this test will not be run
    });

    it('should return the index when present', function() {
      // this test will be run
    });
  });
});

describe('Array', function() {
  describe('#indexOf()', function() {
    it.only('should return -1 unless present', function() {
      // this test will be run
    });

    it('should return the index when present', function() {
      // this test will not be run
    });
  });
});

Hooks

With its default "BDD"-style interface, Mocha provides the hooks before(), after(), beforeEach(), and afterEach(). These should be used to set up preconditions and clean up after your tests.

describe('hooks', function() {
  before(function() {
    // runs before all tests in this block
  });

  after(function() {
    // runs after all tests in this block
  });

  beforeEach(function() {
    // runs before each test in this block
  });

  afterEach(function() {
    // runs after each test in this block
  });

  // test cases
});

To Execute

Set up a test script in package.json:

"scripts": {
  "test": "mocha"
}

Then run tests with:

npm test

Assertions

Assertions are critical to writing test as they validate whether or not the test passed successfully.
Mocha allows you to use any assertion library you wish such as should.js, expect.js, chai, better-assert and unexpected.

Chai

Chai is a BDD / TDD assertion library for node and the browser
Chai can be paired with any javascript testing framework (for instance Mocha)
Chai has several interfaces that allow the developer to choose. The chain-capable BDD styles provide an expressive language & readable style, while the TDD assert style provides a more classical feel. BDD (more popular) - expect, should TDD - assert

Installation

npm install --save-dev chai

Assertion Styles

Chai provides the following assertion styles:

1. Assert style

var assert = require('chai').assert;
var foo = “bar”;

assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');

2. Expect style

var expect = require('chai').expect;
var foo = “bar”;

expect(foo).to.be.a('string');
expect(foo).to.equal('bar');

3. Should style

var should = require('chai').should();
var foo = “bar”;

foo.should.be.a('string');
foo.should.equal('bar');

If you prefer to watch and learn, hop on to our Cypress series on Youtube
Subscribe to my Youtube Channel - QA Camp!

Using Mochawesome Reporter with Cypress

Bushra Alam — Sun, 08 Mar 2020 04:48:53 +0000

Cypress is built on top of Mocha and so it gets the mocha's bdd syntax, hooks and mocha reports. In this post we will be discussing about Mocha Reporters. Mocha provides a whole bunch of reporters to choose from. Some of the mocha built-in reporters are spec, dot matrix, nyan and json. These are good but not as awesome as the one we are going to discuss in this post: Mochawesome Reporter.

Mochawesome reporter is a custom reporter which generates a standalone HTML/CSS report to help visualize your test runs. It has simple, clean, and modern design. The report has filters to display only the tests you want and shows stack trace for failed tests.

Challenge in integrating Mochawesome Reporter with Cypress
Starting Cypress v.3.0.0 Cypress executes each spec in isolation and hence a separate test report is generated for each spec. This is a problem because we need one single report for the complete run (which include multiple specs).
Solution: mochawesome-merge can be used to merge these reports and then generate one HTML report for all your cypress tests.

We will be needing the following npm packages and so let's see what each of them does:

cypress-multi-reporters
Generate multiple mocha reports in a single mocha execution.

mochawesome
Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It runs on Node.js (>=8) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to help visualize your test runs.

mochawesome-merge
Merge several Mochawesome JSON reports.

mochawesome-report-generator (marge)
marge (moch*awesome-report-ge*nerator) is the counterpart to mochawesome, a custom reporter for use with the Javascript testing framework, mocha. Marge takes the JSON output from mochawesome and generates a full fledged HTML/CSS report that helps visualize your test suites.

Setup

Step 1: Installation

Install Mocha
```
npm install mocha --save-dev
```

2. Install cypress-multi-reporters

    ```


    npm install cypress-multi-reporters --save-dev

Install mochawesome
```
npm install mochawesome --save-dev
```

4. Install mochawesome-merge

    ```


    npm install mochawesome-merge --save-dev

Install mochawesome-report-generator



npm install mochawesome-report-generator --save-dev



###Step 2: Add reporter settings in cypress.json

```json


"reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/mocha",
            "quite": true,
            "overwrite": false,
            "html": false,
            "json": true
        }
    }

Step 3: Add scripts in package.json file

For Windows:



"scripts": {
    "clean:reports": "rmdir /S /Q cypress\\reports && mkdir cypress\\reports 
         && mkdir cypress\\reports\\mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

For Mac:



"scripts": {
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports 
         && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

pretest script would create the report folders and clear them if they already exist

test script would do the following:
a. run your test suite
b. create 'mocha' folder under 'cypress/reports'
c. create .json files (one for each spec executed) in the 'mocha' folder

posttest script would combine all the .json files present in 'cypress/reports/mocha' folder and place the combined file 'report.json' in 'cypress/reports/mochareports' and create a beautiful html report.

Execution

It's time to run test suites and view report.



npm run test

Pre and post scripts are automatically executed before and after the main script execution.

You can find a sample project here: https://github.com/bushralam/Cypress

Cypress - End to End Testing Framework

Bushra Alam — Sat, 07 Mar 2020 11:23:47 +0000

Cypress is the new kid in the front-end testing market which is gaining popularity amongst testers and developers alike. It can test anything that runs in a browser. Cypress is open source and its community is very active. Cypress tests are written in JavaScript but let that not scare you, in case you are unfamiliar with JavaScript, majority of the time you would be working with cypress commands which are pretty intuitive to work with.

But having an understanding of JavaScript would be really beneficial.. and so I have written a blog and created a YouTube series: JS for Testers to help you with that as well.

Cypress could be used for:

Unit Testing
Integration Testing
End-to-End Testing

These are some of the outstanding features that Cypress boasts of:

We will be discussing all of them as we explore cypress and reap the benefits.

Cypress and Selenium
Cypress Installation
Commands
- Launching / Navigating the application
- Accessing UI Elements
- Actions on elements
- Assertions
Executing Test
- Running test from GUI
- Running test from Command Line

Cypress and Selenium

Cypress and Selenium exist to serve a very similar purpose but they are as different as they can be. If you are familiar with Selenium, you will be amazed by how simple setting up and getting things running in Cypress is.

Installation is hassle free, writing test is easy, tests are not flaky and tests run really fast.

All of this has been possible because Cypress isn't built on top of Selenium unlike most end-to-end testing tools. In fact, Cypress' architecture is very different from that of Selenium. Selenium executes remote commands through the network, whereas Cypress runs in the same run-loop as your application.

Back to table of contents

If you prefer to watch and learn, hop on to our Cypress series on Youtube
Subscribe to my Youtube Channel - QA Camp!

Cypress Installation

Cypress is all in one. Perhaps this will help you understand:

And cypress installs all of this with a single command:

Let's setup the IDE, create a project and install cypress.

Install IDE

It's a good idea to have an IDE. Visual Studio Code is the preferred IDE for Cypress projects.
You can download Visual Studio Code from here: https://code.visualstudio.com/download

Install Node.js

We need to install Node.js because we need to use npm and npx which get downloaded along with node.js.
You can download node.js from here: https://nodejs.org/en/download/
Once download is complete, launch and run through the installer.
To verify successful installation check the version:



   node -v
   npm -v

Create Project

Create a project folder.
In the terminal go to the project directory and run the following command:
```
npm init
```

    This will create a package.json file inside your project folder.
3. You can open this project in Visual Studio Code.


###Install Cypress

As promised, Cypress will install in a single command:

npm install cypress --save-dev


This will install Cypress desktop app and Cypress CLI. Cypress desktop app is GUI that can be used to run the test in browser. Cypress CLI helps you run cypress tests headlessly.


###Launch Cypress 

To launch the Cypress desktop app (GUI), run the following command:

npx cypress open


![Cypress GUI](https://dev-to-uploads.s3.amazonaws.com/i/lau3k7ea0n53sb0w3coh.png)

The .js files that you see under examples folder are sample cypress tests downloaded to give you a jump start in the world of Cypress.





[Back to table of contents](#toc)


---


#Commands <a name="Commands"></a>

Now, I have been saying Cypress is easy but I don't want you to take my word for it. See for yourself. Read the below code line by line and see if it makes sense to you.


![Cypress Basic Test](https://dev-to-uploads.s3.amazonaws.com/i/brt6f8gonu0h76yz1s4o.png)

Cypress is intuitive because its English-like.

**describe** and **it** come from [Mocha] (https://mochajs.org/), which is a JavaScript test framework.

In the above code we are performing four operations that are most common and would be used in almost all the tests that you write. These are:
1. Visit a page
1. Query for an element
1. Perform an action on the element
1. Make an assertion

Now let's dive deep and explore the different commands cypress provides to perform these four tasks.





[Back to table of contents](#toc)

---

## 1. Launching / Navigating the application <a name="Command_1"></a>

###<mark>visit

**Purpose:** Visit a URL.

**Syntax:**
   * <code>cy.visit(url)</code>
   * <code>cy.visit(url,options)</code>
   * <code>cy.visit(options)</code>

**Examples:**

```js


// Visit a local server running on http://localhost:8000/
cy.visit('http://localhost:8000/')    

// Visit an application
cy.visit('https://www.acme.com/')  

// Visit an application and wait for 30 seconds for the application to launch
cy.visit('https://www.acme.com/', { timeout: 30000 })

// Submit a form
cy.visit({            
   url: 'http://localhost:3000/cgi-bin/newsletterSignup',
   method: 'POST',
   body: {
      name: 'George Burdell',
      email: 'burdell@microsoft.com'
   }
})

url

Purpose: Get the current URL of the active page.

Syntax:

cy.url()
cy.url(options)

Examples:



// Yield the current URL as a string
cy.url()

// verifies the curent url is equal to the given string
cy.url().should('eq', 'http://localhost:3000/cgi-bin/newsletterSignup')    

// verifies the current url includes the given string
cy.url().should('include', '/newsletterSignup')

go

Purpose: Navigate back or forward to the previous or next URL in the browser’s history.

Syntax:

cy.go(direction)
cy.go(direction, options)

Examples:



// Go back in browser’s history
cy.go('back')
cy.go(-1)

// Go forward in browser’s history
cy.go('forward')
cy.go(1)

reload

Purpose: Reload the page.

Syntax:

cy.reload()
cy.reload(forceReload)
cy.reload(options)
cy.reload(forceReload, options)

forceReload: Whether to reload the current page without using the cache. 'true' forces the reload without cache.

Examples:



// Reload the page as if the user clicked ‘Refresh’
cy.visit('http://localhost:3000/admin')
cy.get('#undo-btn').click().should('not.be.visible')
cy.reload()
cy.get('#undo-btn').click().should('not.be.visible')

// Reload the page without using the cache
cy.visit('http://localhost:3000/admin')
cy.reload(true)

Back to table of contents

2. Accessing UI Elements

get

Purpose: Get one or more DOM elements.

Syntax:

cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

Selector: property of an element like id, class etc to filter matching DOM elements.
Alias: giving DOM element a name by which it could be referred later. Defined using the .as() command and referenced with the @ character and the name of the alias.

Examples:



// Find the dropdown-menu with the given class name
cy.get('.dropdown-menu')

// Find element(s) with the given data attribute
cy.get('[data-test-id="test-example"]')

// Create and use an alias
cy.get('button[type=submit]').as('submitBtn')
//...hack hack hack...
cy.get('@submitBtn')     // later retrieve the submitBtn

contains

Purpose: Get the DOM element containing the text.

Syntax:

.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)

Things to note:

contains() could start a series of commands or could be chained to an existing series of command
content could be: String, Number, RegExp

Examples:



<ul>
    <li>apples</li>
    <li>oranges</li>
    <li>bananas</li>
</ul>



// Find the first element containing some text
cy.contains('apples')       // yields <li>apples</li>

// Find the first element with text matching the regular expression
cy.contains(/^b\w+/)       // yields <li>bananas</li>

// Specify a selector to return a specific element
cy.contains('ul', 'apples')       // yields <ul>...</ul>

// When chained to an existing series of commands
cy.get('#checkout-container').contains('Buy Now')
//This will query inside of the <#checkout-container> element.

Access element by index

You can get the first, last or an element at a specific index in an array of elements using first(), last() and eq() respectively.

Examples:



<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>



// Get the first element
cy.get('li').first()      // yield <li>one</li>

// Get the last element
cy.get('li').last()      // yield <li>five</li>

// Get the second element
cy.get('li').eq(1)      // yield <li>two</li>

// Get the second last element
cy.get('li').eq(-2)      // yields <li>four</li>

Access element by relation

You can access parents, children, siblings of an element.

parent- Get the parent DOM element (single level up) of a set of DOM elements.

parents- Get the parent DOM elements (multiple level up) of a set of DOM elements.

parentsUntil- Get all ancestors of each DOM element in a set of matched DOM elements up to, but not including, the element provided.

children- Get the children of each DOM element within a set of DOM elements.

siblings- Get sibling DOM elements.

prev- Get the immediately preceding sibling of each element in a set of the elements.

prevAll- Get all previous siblings of each DOM element in a set of matched DOM elements.

prevUntil- Get all previous siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.

next- Get the immediately following sibling of each DOM element within a set of DOM elements.

nextAll- Get all following siblings of each DOM element in a set of matched DOM elements.

nextUntil- Get all following siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.

Examples:



<ul class='main-nav'>
    <li>Overview</li>
    <li>Getting started
        <ul class='sub-nav'>
            <li>Install</li>
            <li class='active'>Build</li>
            <li>Test</li>
        </ul>
    </li>
</ul>



// parent 
cy.get('li.active').parent()           // yields .sub-nav

// parents
cy.get('li.active').parents()           // yields [.sub-nav, li, .main-nav]

// parentsUntil
cy.get('li.active').parentsUntil('.main-nav')           // yields [.sub-nav, li]

// children
cy.get('ul.sub-nav').children()              // yields [<li>Install</li>,
                                             //         <li class='active'>Build</li>,
                                             //         <li>Test</li>]

cy.get('ul.sub-nav').children('.active')      // yields [<li class='active'>Build</li>]

// siblings
cy.get('.active').siblings()              // yields [<li>Install</li>, <li>Test</li>]

cy.get('li').siblings('.active')          // yields [<li class='active'>Build</li>]



<ul>
    <li id="fruits" class="header">Fruits</li>
    <li>apples</li>
    <li>oranges</li>
    <li>bananas</li>
    <li id="veggies" class="header">Vegetables</li>
    <li>cucumbers</li>
    <li>carrots</li>
    <li>corn</li>
    <li id="nuts" class="header">Nuts</li>
    <li>walnuts</li>
    <li>cashews</li>
    <li>almonds</li>
</ul>



// prev
cy.get('#veggies').prev()         // yields <li>bananas</li>
cy.get('li').prev('#veggies')     // yields <li id="veggies" class="header">Vegetables</li>    

// prevAll
cy.get('#veggies').prevAll()    // yields [<li>apples</li>, <li>oranges</li>, <li>bananas</li>]
cy.get('li').prevAll('#veggies')    // yields <li id="veggies" class="header">Vegetables</li>

// prevUntil
cy.get('#nuts').prevUntil('#veggies')      // yields [<li>cucumbers</li>
                                           // yields       <li>carrots</li>, <li>corn</li>]

 // next
cy.get('#veggies').next()         // yields <li>cucumbers</li>
cy.get('li').next('#veggies')     //        <li id="veggies" class="header">Vegetables</li>    

// nextAll
cy.get('#nuts').nextAll()    // yields [<li>walnuts</li>, <li>cashews</li>, <li>almonds</li>]
cy.get('li').nextAll('#nuts')    // yields <li id="nuts" class="header">Nuts</li>

// prevUntil
cy.get('#veggies').prevUntil('#nuts')      // yields [<li>cucumbers</li>,                                           
                                           //         <li>carrots</li>, <li>corn</li>]

Access element by position

within- Scopes all subsequent cy commands to within this element. Useful when working within a particular group of elements such as a <form>.

root- Get the root DOM element.

Examples:



<form>
    <input name="email" type="email">
    <input name="password" type="password">
    <button type="submit">Login</button>
</form>



cy.get('form').within(($form) => {
    // cy.get() will only search for elements within form,
    // not within the entire document
    cy.get('input[name="email"]').type('john.doe@email.com')
    cy.get('input[name="password"]').type('password')
    cy.root().submit()   // submits the form yielded from 'within'
})

Back to table of contents

3. Actions on elements

click

Purpose: Click a DOM element.

Syntax:

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

Examples:



// Click on button
cy.get('button').click() 

// Click on first el containing 'Welcome'
cy.contains('Welcome').click() 

// Click the top right corner of the button
cy.get('button').click('topRight')

// Specify explicit coordinates relative to the top left corner
cy.get('button').click(15, 40)

// Force a click regardless of its actionable state
// https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Forcing
cy.get('button').click({ force: true })

// Click all buttons found on the page
cy.get('button').click({ multiple: true })

dblclick

Purpose: Double-click a DOM element.

Syntax:

.dblclick()
.dblclick(options)

Examples:



// Double click on button
cy.get('button').dblclick() 

// Double click on first el containing 'Welcome'
cy.contains('Welcome').dblclick()

type

Purpose: Type into a DOM element.

Syntax:

.type(text)
.type(text, options)

Examples:



// Type 'Hello, World' into the 'input'
cy.get('input').type('Hello, World')

// Type a key combination
cy.get('input').type('{shift}{alt}Q')     
// this is the same as a user holding down SHIFT and ALT, then pressing Q

// Special characters sequences
cy.get('#code-input').type('function (num) {return num * num;}', 
                           { parseSpecialCharSequences: false })   
// will not escape { } characters

// Implicit form submission behaviour
cy.get('#username').type('bob@burgers.com')
cy.get('#password').type('password123{enter}')

clear

Purpose: Clear the value of an input or textarea.
It is an alias for .type({selectall}{backspace})

Syntax:

.clear()
.clear(options)

Examples:



// Clear text input
cy.get('[type="text"]').clear()

// Clear the input and type a new value
cy.get('textarea').clear().type('Hello, World')

check

Purpose: Check checkbox(es) or radio(s). The element must be an <input> with type checkbox or radio.

Syntax:

.check()
.check(value)
.check(values)
.check(options)
.check(value, options)
.check(values, options)

Examples:



// Check all checkboxes
cy.get('[type="checkbox"]').check()

// Check the first checkbox
cy.get('[type="checkbox"]').first().check()

// Select all radios
cy.get('[type="radio"]').check()

// Select the radio with the value of ‘US’
cy.get('[type="radio"]').check('US')

// Check the checkboxes with the values ‘ga’ and ‘ca’
cy.get('[type="checkbox"]').check(['ga', 'ca'])

uncheck

Purpose: Uncheck checkbox(es) or radio(s). The element must be an <input> with type checkbox or radio.

Syntax:

.uncheck()
.uncheck(value)
.uncheck(values)
.uncheck(options)
.uncheck(value, options)
.uncheck(values, options)

Examples:



// Uncheck all checkboxes
cy.get('[type="checkbox"]').uncheck()

// Uncheck the first checkbox
cy.get('[type="checkbox"]').first().uncheck()

// Uncheck the checkboxes with the values ‘ga’ and ‘ca’
cy.get('[type="checkbox"]').uncheck(['ga', 'ca'])

select

Purpose: Select an <option> within a <select>.

Syntax:

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Examples:



<select multiple>
    <option value="456">apples</option>
    <option value="457">oranges</option>
    <option value="458">bananas</option>
</select>



// Select the '456' option
cy.get('select').select('456')

// Select the options with the texts “apples” and “bananas”
cy.get('select').select(['apples', 'bananas'])

Back to table of contents

4. Assertions

Before we dive in and see what different cammads are there for assertions, there is a good news - many commands have a default, built-in assertion, or rather have requirements that may cause it to fail without needing an explicit assertion you’ve added.

Here are some examples:

cy.visit() expects the page to send text/html content with a 200 status code.
cy.get() expects the element to eventually exist in the DOM.
cy.contains() expects the element with content to eventually exist in the DOM.
.click() expects the element to eventually be in an actionable state.

There are two ways to write assertions in Cypress:

Implicit Subjects: Using .should() and .and()
Explicit Subjects: Using expect

Points to note:

Cypress bundles Chai, Chai-jQuery, and Sinon-Chai to provide built-in assertions. You can see a comprehensive list of them here.
Using .should() and .and() is the preferred way of making assertions in Cypress.
Assertions are automatically retried until they pass or time out.
In most cases, .should() and .and() yields the same subject it was given from the previous command. However, some chainers change the subject. The chainers that come from Chai or Chai-jQuery will always document what they return and that will help you know what assertions change the subject and which keep it the same.

should

Purpose: Create an assertion.

Syntax:

.should(chainers)
.should(chainers, value)
.should(chainers, method, value)
.should(callbackFn)

Examples:



cy.get('nav').should('be.visible')

cy.get('nav').should('be.disabled')

cy.get('nav').should('have.class', 'active')

cy.get('nav').should('not.have.id', 'Dashbaord')

cy.get('nav').should('have.attr', 'href', '/users')

cy.get('nav').children().should('have.length', 8)

Callback Function:
Say, we have to confirm the text inside each of the three items that appear. We can have 3 commands for 3 assertions:



cy.get('#app div:nth(0)').should('contain', 'first child')  
cy.get('#app div:nth(1)').should('contain', 'second child')  
cy.get('#app div:nth(2)').should('contain', 'third child')

This could be done in a single assertion:



cy.get('#app div')
   .should(($div) => {
      expect($div.eq(0)).to.contain('first child')
      expect($div.eq(1)).to.contain('second child')
      expect($div.eq(2)).to.contain('third child')
   })

and

Purpose: Create an assertion. An alias of .should()

Syntax:

.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)

Examples:



cy.get('nav')
    .should('be.visible')
    .and('be.disabled')
    .and('have.class', 'active')

cy.get('nav')
    .should('not.have.id', 'Dashbaord')
    .and('have.attr', 'href', '/users')

Back to table of contents

Executing Test

To run your tests you have got following options:

Test can be executed from GUI and from Command Line
Test can be executed in browser and in headless mode Also, the test runs automatically when you make some changes and save it. This comes handy when you are writing the test and want to execute it often to check. This is called 'Real time reloads'.

1. Running test from GUI

Running tests from GUI is easy.
First, let's launch the Cypress GUI using the following command:



npx cypress open

This is how it looks:

All the .js files are the test files.

To run any test simply click on it. Cypress Test Runner will open and the test will run in it.

This test runner is very intuitive and very powerful. The Command Log lists all the commands that ran and when you tower over them, the App preview section would should you the application state when the command was executed. This is the much loved 'Time Travel' feature that cypress provides out of the box.

2. Running test from Command Line

Using command line, test can be execute in browser as well as in headless mode.

2.1. Headless Mode

Using command line, by default, tests are run in headless mode. Cypress wil record videos when running headlessly.

Run a single spec file



npx cypress run --spec "cypress/integration/examples/actions.spec.js"

Run multiple spec files



npx cypress run --spec "cypress/integration/examples/actions.spec.js,
cypress/integration/examples/files.spec.js"

Run all spec files in a folder



npx cypress run --spec "cypress/integration/examples/**/*"

Run all the spec files in the project



npx cypress run

2.2. In Browser

To execute tests in browser using command line, you simply need to add '--headed' (for electron browser) or '--browser browserName' for some other browser. The “browser” argument can be set to “chrome”, “canary”, “chromium”, or “electron” to launch a browser detected on your system. Cypress will attempt to automatically find the installed browser for you.



# for electron browser
npx cypress run --headed

# for specifying your prefered browser: chrome, canary, chromium, or electron
cypress run --browser chrome

Back to table of contents

If you prefer to watch and learn, hop on to our Cypress series on Youtube
Subscribe to my Youtube Channel - QA Camp!

You can find a sample project here: https://github.com/bushralam/Cypress

DEV Community: Bushra Alam

Say Hello to Playwright

Table of Contents

Why Playwright

Playwright Installation

Core Concepts

Browser Type

Browser Instance

Browser Context

Page

Basic Script

Playwright API

Navigation

Identifying Web Elements

Interacting with Web Elements

End-to-End Testing with Playwright

JavaScript For Testers

Table of Contents

What is JavaScript?

Install Node.js and Code Editor

JavaScript Basics

Variables

Constants

Conditional Operators

Loops

Functions

NPM - Node Package Manager

package.json

NPX

Arrow Functions

BDD and Cucumber

BDD

CUCUMBER

Discover

Formulate

Automate

Setup

Pre-Setup

Setup Cucumber

Feature File

Gherkin

Step Definition

Passing Data

1. Regular Expression

2. Data Table

3. Scenario Outline & Example keyword

Tagging

Executing Test

Introduction to Testing with Mocha and Chai

Mocha

Installation

Mocha Basic Spec

Hooks

To Execute

Assertions

Chai

Installation

Assertion Styles

1. Assert style

2. Expect style

3. Should style

Using Mochawesome Reporter with Cypress

Setup

Step 1: Installation

Step 3: Add scripts in package.json file

Execution

Cypress - End to End Testing Framework

Table of Contents

Cypress and Selenium

Cypress Installation

Install IDE

Install Node.js

Create Project

url

go

reload

2. Accessing UI Elements

get

contains

Access element by index