Merge pull request #10 from rodmatola/axe

Cypress Axe

README.md

@@ -1,5 +1,8 @@
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/05e59f07/hostfully)
+
 # Hostfully QA Engineer Cypress exercise
 
+This repository contains a resolution for Hostfully QA Engineer Cypress exercise.
 
 ## Running the project
 
@@ -101,4 +104,35 @@ Some issues found on website during exploratory tests were registered on this [r
 1. Xvfb is missing on devcontainer/codespace config. Tests will not run
 1. Didn't test devcontainer locally (poor machine)
 
+## Other repository configs
+
+### GitHub Super Linter
+
+GitHub Super-Linter is a ready-to-run collection of linters and code analyzers, to help validate your source code.
+
+The goal of super-linter is to help you establish best practices and consistent formatting across multiple programming languages, and ensure developers are adhering to those conventions.
+
+In this repository it is set to [TypeScript ESLint](https://eslint.org/), [JSCPD](https://www.npmjs.com/package/jscpd) and [Gitleaks](https://github.com/gitleaks/gitleaks)
+
+### Dependabot
+
+[Dependabot](https://docs.github.com/en/code-security/dependabot/working-with-dependabot) is a tool that helps developers keep their project dependencies up to date by automatically checking for and creating pull requests to update dependencies when new versions are released.
+
+If Dependabot finds a vulnerability in a package you depend on, it sends you an alert. If it can suggest a fix, it also sends a pull request to update your dependency manifest with the closest non-vulnerable version.
+
+In this repo is set to check NPM packages and GitHub Actions
+
+### Pull Request Template
+
+Just a template to keep a pattern for what to write in a pull request
+
+### Percy
+
+Percy is a Visual Regression tool. In this repository is set just with the basic configuration.
+
+To check the comparisons, visit <https://percy.io/05e59f07/hostfully>
+
+### Axe
+
+A tool to run accessibility checks. In this repository is set just with the basic configuration
 

cypress/e2e/a11y.cy.ts

@@ -0,0 +1,25 @@
+import { computersListPage } from "../support/pageElements/computerDatabase.elements"
+
+describe('Computer database accessibility', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.injectAxe()
+  })
+
+  it('verifies computers page a11y', () => {
+    cy.get(computersListPage.computersFound).should('be.visible')
+    cy.checkA11y()
+  })
+
+  it('verifies adds a new computer page a11y', () => {
+    cy.get(computersListPage.addNewComputerBtn).click()
+    cy.injectAxe()
+    cy.checkA11y()
+  })
+
+  it('verifies delete a computer page a11y', () => {
+    cy.get(computersListPage.tableComputerNames).first().click()
+    cy.injectAxe()
+    cy.checkA11y()
+  })
+})

cypress/e2e/visualRegression.cy.ts

@@ -1,10 +1,7 @@
-import { computersListPage, addNewComputerPage, editComputerPage } from "../support/pageElements/computerDatabase.elements"
-import { computerRandomInfo, myComputerInfo } from "../fixtures/computerInfo"
-import { ComputerInfo } from "../support/types/ComputerInfo"
+import { computersListPage } from "../support/pageElements/computerDatabase.elements"
 
-describe('Computer database', () => {
+describe('Computer database Visual Regression', () => {
   beforeEach(() => {
-    cy.step('Given I am on computers page')
     cy.visit('/')
   })
 

cypress/support/e2e.ts

@@ -1,3 +1,4 @@
 import './commands'
 import 'cypress-plugin-steps'
-import '@percy/cypress';
+import '@percy/cypress'
+import 'cypress-axe'

package.json

@@ -14,7 +14,9 @@
     "@faker-js/faker": "^8.3.1",
     "@percy/cli": "^1.27.4",
     "@percy/cypress": "^3.1.2",
+    "axe-core": "^4.8.2",
     "cypress": "^13.6.1",
+    "cypress-axe": "^1.5.0",
     "cypress-plugin-steps": "^1.1.1",
     "eslint-plugin-cypress": "^2.15.1",
     "typescript": "^5.3.3"

tsconfig.json

@@ -8,10 +8,11 @@
     "types": [
       "cypress",
       "node",
-      "cypress-plugin-steps"
+      "cypress-plugin-steps",
+      "cypress-axe"
     ]
   },
   "include": [
     "**/*.ts"
   ]
-}
+}