diff --git a/README.md b/README.md index bfee82a..2efd868 100644 --- a/README.md +++ b/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 + +### Axe + +A tool to run accessibility checks. In this repository is set just with the basic configuration diff --git a/cypress/e2e/a11y.cy.ts b/cypress/e2e/a11y.cy.ts new file mode 100644 index 0000000..460d506 --- /dev/null +++ b/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() + }) +}) diff --git a/cypress/e2e/visualRegression.cy.ts b/cypress/e2e/visualRegression.cy.ts index e233133..fa961f7 100644 --- a/cypress/e2e/visualRegression.cy.ts +++ b/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('/') }) diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index 919c63d..cd8deb7 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -1,3 +1,4 @@ import './commands' import 'cypress-plugin-steps' -import '@percy/cypress'; +import '@percy/cypress' +import 'cypress-axe' diff --git a/package-lock.json b/package-lock.json index 42b0979..2552dbc 100644 --- a/package-lock.json +++ b/package-lock.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" @@ -1309,6 +1311,15 @@ "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==", "dev": true }, + "node_modules/axe-core": { + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1838,6 +1849,19 @@ "node": "^16.0.0 || ^18.0.0 || >=20.0.0" } }, + "node_modules/cypress-axe": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/cypress-axe/-/cypress-axe-1.5.0.tgz", + "integrity": "sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "axe-core": "^3 || ^4", + "cypress": "^10 || ^11 || ^12 || ^13" + } + }, "node_modules/cypress-plugin-steps": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/cypress-plugin-steps/-/cypress-plugin-steps-1.1.1.tgz", diff --git a/package.json b/package.json index e5fa1e2..bf1b043 100644 --- a/package.json +++ b/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" diff --git a/tsconfig.json b/tsconfig.json index 6d91b92..da4868d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,11 @@ "types": [ "cypress", "node", - "cypress-plugin-steps" + "cypress-plugin-steps", + "cypress-axe" ] }, "include": [ "**/*.ts" ] -} \ No newline at end of file +}