Lighthouse (#7)

* added latest cypress with cypress-audit

* changed to readme

* audit fix

README.md

@@ -12,6 +12,10 @@ Book: https://www.routledge.com/Automated-Software-Testing-with-Cypress/Palani/p
 7. Jack Cross for cypress-image-snapshot,
 8. Lukasz Gandecki for cypress-cucumber-preprocessor.
 
+# Tools required to install prior to use this code:
+1. Node version 12 or above
+2. Visual Studio Code or IntelliJ or WebstormIDE or any valid IDE
+
 # Dependencies:
 1. npm install
 2. npm link

cypress/integration/features/loginOrangehrmTest.feature

@@ -4,4 +4,13 @@ Feature: Login Page Verification on OrangeHRM website
       Given I open OrangeHRM homepage
       Then I should see title "OrangeHRM"
       Then I should see "LOGIN Panel" text displayed
-      And I should see "Alternative Login" text displayed
+      And I should see "Alternative Login" text displayed
+
+
+     Scenario: check web page health through lighthouse audit and pa11y audit on valid login page display with login fields
+      Given I open OrangeHRM homepage
+      Then I should see title "OrangeHRM"
+      Then I should see "LOGIN Panel" text displayed
+      #And I should see "Alternative Login" text displayed
+      And I should see web audit results
+      And I should see web accessibility audit results

cypress/plugins/index.js

@@ -11,6 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 const cucumber = require("cypress-cucumber-preprocessor").default;
+const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");
 const getCompareSnapshotsPlugin = require("cypress-visual-regression/dist/plugin");
 const {
   addMatchImageSnapshotPlugin,
@@ -29,4 +30,16 @@ module.exports = (on, config) => {
 
   //const file = config.env.configFile;
   //return getCongByFile(file);
+  on("before:browser:launch", (browser = {}, launchOptions) => {
+    prepareAudit(launchOptions);
+  });
+
+  on("task", {
+    lighthouse: lighthouse((lighthouseReport) => {
+      console.log(lighthouseReport); // raw lighthouse reports
+    }),
+    pa11y: pa11y((pa11yReport) => {
+      console.log(pa11yReport); // raw pa11y reports
+    }),
+  });
 };

cypress/support/commands.js

@@ -1,6 +1,7 @@
 const compareSnapshotCommand = require("cypress-visual-regression/dist/command");
 import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
 import "cypress-file-upload";
+import "cypress-audit/commands";
 
 Cypress.Commands.add("check_URL_ResponseStatus", (args) => {
   cy.get(args).each(($a) => {

cypress/support/step_definitions/Shared.js

@@ -93,3 +93,11 @@ Then('I log {string}', (string) => {
 Then('I check all URL response status should be 200', function () {
   cy.checkURLResponseStatus()
 })
+
+Then('I should see web audit results', function () {
+  cy.lighthouse();
+})
+
+Then('I should see web accessibility audit results', function () {
+  cy.pa11y();
+})