Video Player Testing | Cypress | CircleCI

Introduction:

This Test Automation Framework is created using Cypress which can be used to fot functional testing. Covered all the mandatory & high-level functionality for the video player. Created few custom commands for the best practices.

Stack

Prerequisites:

• node and npm
• npm
• Please refer for any help in node and npm.
• https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/

Execution

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

git clone [email protected]:rehmanuet/youtube-video-player-automation-cypress.git
npm install
npm run 

Coverage

This framework covers following functionality

Test Cases Breakdown

Feature	Functionality Covered
Element	All player elements/buttons/options
Player	Autoplay/Play/Pause & Play/Pause at specific time
Mute	Mute/Unmute
Volume	Increase/Decrease Volume at specific %
Mini-Player	Minimize/Maximize Player
Full-Screen	Full/Normal Screen

Notes

1- Created some custom commands for scalibility purpose eg. ( All commands could be found at cypress/support/commands.js

/**
 * Created the custom generic command to increase the volume by percentage,
 * @param {Integer} percentValue - Value to increase the volume.
 */
Cypress.Commands.add("increaseVolumeTo", (percentValue) => {
  cy.get(youtube.selectors.volume).then((ele) => {
    if (ele.length > 0) {
      for (let index = 0; index < percentValue / 5; index++) {
        cy.get(youtube.selectors.volume)
        .trigger("mouseover")
        .type("{uparrow}");
      }
    }
  });
});

2- Full Screen Testing of video player is not yet supported by Cypress (ref:#1213) but I managed to test with a workaround

3- Used moment.js library for calculating time and testing play/pause functionality. eg

/*
 * If video is playing then its current time is greater than start time
 * difference(seconds) = (videoCurrentTime - videoStartTime)/1000
 */
cy.get(youtube.selectors.currentTime)
  .text()
  .then((value) => {
    let videoStartTime = "0:00";
    let videoCurrentTime = value;
    let diff =
      (moment(videoCurrentTime, "mm:ss") -moment(videoStartTime, "mm:ss")) / 1000;
    cy.get(youtube.selectors.currentTime)
      .text()
      .should("not.be", videoStartTime);
    expect(diff).to.be.greaterThan(0);
  });
cy.get(youtube.selectors.currentTime).trigger("mouseover");

Results

Video recording are available at cypress/videos/

Sometime testcase fails intermittently on CI because of headless mode (ref:cypress:issue)

contact:rehmanuet[at]yahoo[dot]com or LinkedIn