diff --git a/.circleci/config.yml b/.circleci/config.yml index ac30de7ae3..89944475ba 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,16 +1,17 @@ version: 2.1 orbs: - cypress: cypress-io/cypress@1.26.0 + cypress: cypress-io/cypress@3 executors: node-executor: + resource_class: medium+ docker: - - image: cimg/node:16.15.1 + - image: cimg/node:18.15.0 with-chrome-and-firefox: resource_class: medium+ docker: - - image: 'cypress/browsers:node16.13.2-chrome97-ff96' + - image: 'cypress/browsers:node18.12.0-chrome106-ff106' commands: docs-build: @@ -53,7 +54,27 @@ jobs: - attach_workspace: at: ~/repo - run: npm run lint - + + install-and-persist: + executor: cypress/default + steps: + - cypress/install + - persist_to_workspace: + root: ~/ + paths: + - .cache/Cypress + - project + + run-tests-in-parallel: + executor: cypress/default + parallelism: 6 + steps: + - attach_workspace: + at: ~/ + - cypress/run-tests: + start-command: 'npm run start' + cypress-command: 'npx wait-on http://localhost:3000 && npx cypress run --parallel --record' + release: <<: *job-defaults steps: @@ -69,7 +90,6 @@ jobs: node ./scripts/search/scrape-and-compare-algolia-index.mjs workflows: - version: 2 build-and-test: jobs: - build @@ -77,7 +97,13 @@ workflows: name: "Lint JS/CSS/Markdown" requires: - build - + - install-and-persist: + name: Install & Persist To Workspace + - run-tests-in-parallel: + name: Run Tests in Parallel + requires: + - build + - Install & Persist To Workspace # Run Algolia scraper only on main. - release: name: 'Run Algolia scraper' diff --git a/.github/ISSUE_TEMPLATE/documentation_request.yml b/.github/ISSUE_TEMPLATE/documentation_request.yml index a41394591d..2a6bacc069 100644 --- a/.github/ISSUE_TEMPLATE/documentation_request.yml +++ b/.github/ISSUE_TEMPLATE/documentation_request.yml @@ -10,21 +10,12 @@ body: If you have an idea for a new documentation topic, noticed that something is not properly documented, or feel that something is incorrect with the current documentation, you're in the right place! - - type: "input" - id: "subject" - attributes: - label: "Subject" - description: - "What is the subject (guides, api, plugins, examples, faq) of this request?" - placeholder: "Guides" - validations: - required: true - type: "textarea" id: "description" attributes: label: "Description" description: "What about the subject's documentation should be added or changed?" - placeholder: "Update Guides with new 'Migrating to Cypress' page" + placeholder: "Update with new 'Migrating to Cypress' page" validations: required: true diff --git a/.github/PULL_REQUEST_TEMPLATE/plugin_template.md b/.github/PULL_REQUEST_TEMPLATE/plugin_template.md deleted file mode 100644 index 0b4e4279eb..0000000000 --- a/.github/PULL_REQUEST_TEMPLATE/plugin_template.md +++ /dev/null @@ -1,13 +0,0 @@ - - - - -Before submitting your plugin, please check to see if it fulfills these requirements: - -- [ ] šŸš€ Works with the latest major version of Cypress -- [ ] šŸ›  Plugin purpose is clearly documented (in a README or docs website) -- [ ] šŸ“ Well-written documentation - A great example ([link](https://github.com/Fredx87/cypress-keycloak-commands#cypress-keycloak-commands)) -- [ ] šŸ”¬ Tested using Cypress - tests using Cypress can act as both example usage _and_ test coverage -- [ ] šŸ‘·ā€ā™€ļø CI pipeline that's passing (CircleCI and [Github Actions](https://github.com/cypress-io/cypress-tutorial-build-todo/blob/main/.github/workflows) are both free for Open Source) - -If you have reason to believe your plugin does not need to meet certain requirements, please feel free to provide justification below: diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md deleted file mode 100644 index 36629d915e..0000000000 --- a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md +++ /dev/null @@ -1,32 +0,0 @@ - - -# Github Issue :octocat: - -Closes # - -## šŸ“ Purpose of Pull Request - -> Add a brief description - -## šŸ¤” How to Setup - -### šŸ“„ Page(s) to test - -> Please provide links to the changes if applicable - -### āœ… Steps to run pull request - -> Please describe the behavior or changes to run this PR - -## šŸ“ø Proof of Change - -> Place screenshots or GIFs of visual changes if applicable - -## šŸ“ Additional Information diff --git a/.github/workflows/add_issue_to_triage_board.yml b/.github/workflows/add_issue_to_triage_board.yml new file mode 100644 index 0000000000..e9e74b93b9 --- /dev/null +++ b/.github/workflows/add_issue_to_triage_board.yml @@ -0,0 +1,12 @@ +name: 'Add issue/PR to Triage Board' +on: + issues: + types: + - opened + pull_request_target: + types: + - opened +jobs: + add-to-triage-project-board: + uses: cypress-io/cypress/.github/workflows/triage_add_to_project.yml@develop + secrets: inherit diff --git a/.github/workflows/triage_handle_issue_comment.yml b/.github/workflows/triage_handle_issue_comment.yml new file mode 100644 index 0000000000..0061e2febf --- /dev/null +++ b/.github/workflows/triage_handle_issue_comment.yml @@ -0,0 +1,9 @@ +name: 'Handle Comment Workflow' +on: + issue_comment: + types: + - created +jobs: + closed-issue-comment: + uses: cypress-io/cypress/.github/workflows/triage_handle_new_comments.yml@develop + secrets: inherit diff --git a/.node-version b/.node-version index 19c7bdba7b..7ec56198d3 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -16 \ No newline at end of file +18.17.1 \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 8c58bd48da..bd396f5dfa 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "semi": false, "singleQuote": true, "printWidth": 80, - "proseWrap": "always" -} + "proseWrap": "preserve", + "trailingComma": "es5" +} \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 300a912a33..0000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,2 +0,0 @@ -Please review our -[Code of Conduct](https://github.com/cypress-io/cypress/blob/develop/CODE_OF_CONDUCT.md). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3c3bf3ffde..e136b5db76 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -5,27 +5,21 @@ Thanks for taking the time to contribute! :smile: ## Table of Contents - [Contributing to Cypress Documentation](#contributing-to-cypress-documentation) - - [Code of Conduct](#code-of-conduct) + - [Table of Contents](#table-of-contents) - [Writing Documentation](#writing-documentation) - - [Admonitions](#admonitions) - - [Images](#images) - - [Videos](#videos) - - [Icons](#icons) + - [VSCode MDX Extension](#vscode-mdx-extension) + - [Images](#images) + - [Videos](#videos) + - [Icons](#icons) - [Partials](#partials) - [Adding Plugins](#adding-plugins) - [Adding Pages](#adding-pages) - - [Writing the Changelog](#writing-the-changelog) - - [Categories](#categories) + - [Patches](#patches) + - [@docusaurus/mdx-loader patch](#docusaurusmdx-loader-patch) - [Committing Code](#committing-code) - [Pull Requests](#pull-requests) - [Contributor License Agreement](#contributor-license-agreement) - [Deployment](#deployment) - - [Trigger workflow build](#trigger-workflow-build) - -## Code of Conduct - -All contributors are expected to abide by our -[Code of Conduct](https://github.com/cypress-io/cypress/blob/develop/CODE_OF_CONDUCT.md). ## Writing Documentation @@ -41,7 +35,7 @@ fork) of this repository under your personal account. **Clone your forked repository** ```shell -git clone git@github.com:/cypress-documentation.git +git clone https://github.com//cypress-documentation.git cd cypress-documentation ``` @@ -51,29 +45,23 @@ If you are using VS Code, download the [MDX extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) to get full editor support for MDX files. -#### Admonitions - -Use [Admonitions](https://docusaurus.io/docs/markdown-features/admonitions) to -grab the reader's attention with a blurb. - #### Images If you are starting a new page and want to add images, add a new folder to [`static/img`](/static/img). For example when adding a new "Code Coverage" page -to `guides/tooling`, I have created new folder `assets/img/guides/tooling` and +to `app/tooling`, I have created new folder `assets/img/app/tooling` and copied an image there called `coverage-object.png`. Within the markdown, I can include the image using the [`` component](/src/components/docs-image). ```jsx ``` -Typically you should include the `alt` and `title` attributes to give the user -more information about the image. +You should always include the `alt` and `title` attributes to ensure the image is accessible and to give the user more information about the image. #### Videos @@ -114,9 +102,9 @@ You can learn about how to import markdown & partials ### Adding Plugins To add a plugin, submit a [pull request](#Pull-Requests) with the corresponding -data added to the [`plugins.json`](/src/data/plugins.json) file. Your plugin -should have a name, description, link to the plugin's code, as well as any -keywords. +data added to the [`plugins.json`](/src/data/plugins.json) file. +Your plugin entry should have a name, description, link to the plugin's code (for example to a repository on GitHub), +as well as any keywords. We want to showcase plugins that work and have a good developer experience. This means that a good plugin generally has: @@ -134,15 +122,20 @@ Each plugin submitted to the plugins list should have the following: - Demonstrates the plugin working - Acts as real-world example usage -2. CI pipeline -3. Compatibility with at least the latest major version of Cypress +1. CI pipeline +1. Compatibility with at least the latest major version of Cypress +1. Populated [package-json](https://docs.npmjs.com/cli/v11/configuring-npm/package-json) fields + + - [homepage](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#homepage) + - [repository](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#repository) for the command [npm repo](https://docs.npmjs.com/cli/v11/commands/npm-repo) + - [bugs](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#bugs) for the command [npm bugs](https://docs.npmjs.com/cli/v11/commands/npm-bugs) -Plugins are listed in in the following order to for users: +Plugins are listed in the following order: -- official -- verified -- community -- experimental +- official (Cypress owned) +- verified (community owned and verified by Cypress) +- community (community owned and unverified) +- deprecated (npm registry missing, source repo archived or incompatible with v10+) ### Adding Pages @@ -166,30 +159,6 @@ We also opened an [issue](https://github.com/facebook/docusaurus/issues/7946) to add this as a feature to Docusaurus, so if this gets implemented this patch can go away. -### Writing the Changelog - -When adding to the [Changelog](/docs/guides/references/changelog.mdx), create a -new section with the title as the version number on top of the previous section. -Be sure to follow the category structure defined below (in this order). Each -bullet point in the list should _always_ be associated to an issue on the -[`cypress`](https://github.com/cypress-io/cypress) repo and link to that issue -(except for Documentation changes). - -#### Categories - -- **Summary** - If it is a large release, you may write a summary explaining - what the point of this release is (mostly used for breaking releases) -- **Breaking Changes** - The users current implementation of Cypress may break - after updating. -- **Deprecations** - Features have been deprecated, but will not break after - updating. -- **Features** - A new feature -- **Bugfixes** - A bug existed in Cypress and a PR fixed the issue -- **Misc** - Not a feature or bugfix, but work that was done. May be internal - work that was done and associated with an issue -- **Documentation Changes** - our docs were updated based on behavior changes in - release - ## Committing Code ### Pull Requests @@ -230,9 +199,7 @@ open a pull request (PR) from your repo to the ### Contributor License Agreement We use a [`cla-assistant.io`](https://cla-assistant.io/) web hook to make sure -every contributor assigns the rights of their contribution to Cypress.io. If you -want to read the CLA agreement, its text is in this -[gist](https://gist.github.com/bahmutov/cf22bc6c6b55219d0f9a76d04981f7ae). +every contributor assigns the rights of their contribution to Cypress.io. After making a [pull request](#pull-requests), the CLA assistant will add a review comment. Click on the link and accept the CLA. That's it! @@ -242,20 +209,3 @@ review comment. Click on the link and accept the CLA. That's it! We will try to review and merge pull requests as fast as possible. After merging, the changes will be made available on the official [https://docs.cypress.io](https://docs.cypress.io) website. - -### Trigger workflow build - -Due to CircleCI API limitations, you cannot trigger a workflow build using the -API. Thus if you need to build, test and deploy `your-branch` branch for -example, your best bet is to create an empty GitHub commit in the -[cypress-io/cypress-documentation](https://github.com/cypress-io/cypress-documentation) -repository in the `your-branch` branch. We have added -[make-empty-github-commit](https://github.com/bahmutov/make-empty-github-commit) -as a dev dependency and set it as `make-empty-commit` NPM script in the -[package.json](package.json). - -To trigger production rebuild and redeploy, use personal GitHub token and run: - -```shell -GITHUB_TOKEN= npm run make-empty-commit -- --message "trigger deploy" --branch main -``` diff --git a/README.md b/README.md new file mode 100644 index 0000000000..78631c3c69 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# Cypress Documentation [![Discord chat](https://img.shields.io/badge/chat-on%20Discord-brightgreen)](https://on.cypress.io/discord) [![first-timers-only](http://img.shields.io/badge/first--timers--only-friendly-blue.svg)](https://github.com/cypress-io/cypress-documentation/labels/first-timers-only) + +![Cypress Documentation Preview](/static/img/cypress-docs.png) + +## CI status + +[![CircleCI](https://circleci.com/gh/cypress-io/cypress-documentation/tree/main.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-documentation/tree/main) +`main` branch + +[![Netlify Status](https://api.netlify.com/api/v1/badges/dbf22ada-b50c-49b0-a933-bf02e87d25d1/deploy-status)](https://app.netlify.com/sites/cypress-docs/deploys) + +Our docs are built using [Docusaurus](https://docusaurus.io/). + +### Installation + +``` +$ npm i +``` + +### Local Development + +``` +$ npm run start +``` + +This command starts a local development server and opens up a browser window. +Most changes are reflected live without having to restart the server. + +### Build + +``` +$ npm run build +``` + +This command generates static content into the `dist` directory and can be +served using any static contents hosting service. + +## Contributing + +Refer to the [`CONTRIBUTING.md`](/CONTRIBUTING.md) guide for details. + +## License + +This project is licensed under the terms of the [MIT license](/LICENSE.md). diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 0000000000..3f90e8524e --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,56 @@ +import { defineConfig } from "cypress"; +import { readdirSync } from 'fs' +import { join } from 'path' + +export default defineConfig({ + projectId: 'imown1', + fixturesFolder: false, + viewportHeight: 800, + viewportWidth: 1200, + experimentalMemoryManagement: true, + retries: { + runMode: 2, + openMode: 0, + }, + e2e: { + supportFile: false, + baseUrl: "http://localhost:3000", + setupNodeEvents(on, config) { + const path = 'docs'; + + function walk(dir: string): string[] { + return readdirSync(dir, { withFileTypes: true }).flatMap((file) => { + // ignore these irrelevant files with no content + if (file.name.includes('_category_.json') || file.name.includes('.DS_Store')) { + return [] + } + + if (file.name.includes('lodash')) { + // lodash file actually goes to _ URL + file.name = file.name.replace('lodash', '_') + } + + if (file.name.includes('.mdx')) { + // remove the .mdx file extension + file.name = file.name.slice(0, -4) + } + + if (file.isDirectory()) { + if(file.name === 'partials') { + return [] + } + return walk(join(dir, file.name)) + } else { + return [join(dir, file.name)] + } + }) + } + + const URLs = walk(path).filter((file) => file !== undefined).map((file) => file.slice(5)) + + config.env.URLs = URLs + + return config + }, + }, +}) diff --git a/cypress/e2e/all_accessibility_pages.cy.ts b/cypress/e2e/all_accessibility_pages.cy.ts new file mode 100644 index 0000000000..478dc4bd2f --- /dev/null +++ b/cypress/e2e/all_accessibility_pages.cy.ts @@ -0,0 +1,17 @@ +const URLs: Array = Cypress.env('URLs') + +// Mostly this is to get a UI Coverage and Accessibility report +describe('Visit all Accessibility pages', () => { + URLs.forEach((URL) => { + if (!URL.startsWith('accessibility')) return + + it(`Visit ${URL} `, () => { + cy.visit(URL) + cy.get('h1') + .should('be.visible') + .and('not.have.text', 'Page Not Found') + + cy.get('[aria-label="Switch to dark mode"]').click() + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/all_api_pages.cy.ts b/cypress/e2e/all_api_pages.cy.ts new file mode 100644 index 0000000000..ef49bb846c --- /dev/null +++ b/cypress/e2e/all_api_pages.cy.ts @@ -0,0 +1,17 @@ +const URLs: Array = Cypress.env('URLs') + +// Mostly this is to get a UI Coverage and Accessibility report +describe('Visit all API pages', () => { + URLs.forEach((URL) => { + if (!URL.startsWith('api')) return + + it(`Visit ${URL} `, () => { + cy.visit(URL) + cy.get('h1') + .should('be.visible') + .and('not.have.text', 'Page Not Found') + + cy.get('[aria-label="Switch to dark mode"]').click() + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/all_app_pages.cy.ts b/cypress/e2e/all_app_pages.cy.ts new file mode 100644 index 0000000000..b8c2d6b86d --- /dev/null +++ b/cypress/e2e/all_app_pages.cy.ts @@ -0,0 +1,17 @@ +const URLs: Array = Cypress.env('URLs') + +// Mostly this is to get a UI Coverage and Accessibility report +describe('Visit all App pages', () => { + URLs.forEach((URL) => { + if (!URL.startsWith('app')) return + + it(`Visit ${URL} `, () => { + cy.visit(URL) + cy.get('h1') + .should('be.visible') + .and('not.have.text', 'Page Not Found') + + cy.get('[aria-label="Switch to dark mode"]').click() + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/all_cloud_pages.cy.ts b/cypress/e2e/all_cloud_pages.cy.ts new file mode 100644 index 0000000000..8e470d1d6f --- /dev/null +++ b/cypress/e2e/all_cloud_pages.cy.ts @@ -0,0 +1,17 @@ +const URLs: Array = Cypress.env('URLs') + +// Mostly this is to get a UI Coverage and Accessibility report +describe('Visit all Cloud pages', () => { + URLs.forEach((URL) => { + if (!URL.startsWith('cloud')) return + + it(`Visit ${URL} `, () => { + cy.visit(URL) + cy.get('h1') + .should('be.visible') + .and('not.have.text', 'Page Not Found') + + cy.get('[aria-label="Switch to dark mode"]').click() + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/all_ui_cov_pages.cy.ts b/cypress/e2e/all_ui_cov_pages.cy.ts new file mode 100644 index 0000000000..b8344666c0 --- /dev/null +++ b/cypress/e2e/all_ui_cov_pages.cy.ts @@ -0,0 +1,17 @@ +const URLs: Array = Cypress.env('URLs') + +// Mostly this is to get a UI Coverage and Accessibility report +describe('Visit all UI Coverage pages', () => { + URLs.forEach((URL) => { + if (!URL.startsWith('ui-coverage')) return + + it(`Visit ${URL} `, () => { + cy.visit(URL) + cy.get('h1') + .should('be.visible') + .and('not.have.text', 'Page Not Found') + + cy.get('[aria-label="Switch to dark mode"]').click() + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/basic_tests.cy.ts b/cypress/e2e/basic_tests.cy.ts new file mode 100644 index 0000000000..5461fe9798 --- /dev/null +++ b/cypress/e2e/basic_tests.cy.ts @@ -0,0 +1,76 @@ +describe('Basic tests', () => { + beforeEach(() => { + cy.visit('/') + }) + + it('root reroutes to App ', () => { + cy.url().should('include', '/app/get-started/why-cypress') + }) + + describe('Main Nav', () => { + it('App', () => { + cy.get('nav a').contains('App').click() + cy.url().should('include', '/app/get-started/why-cypress') + cy.get('[aria-current="page"]').should('contain', 'App') + }) + + it('API', () => { + cy.get('nav a').contains('API').click() + cy.url().should('include', '/api/table-of-contents') + cy.get('[aria-current="page"]').should('contain', 'API') + }) + + it('Cloud', () => { + cy.get('nav a').contains('Cloud').click() + cy.url().should('include', '/cloud/get-started/introduction') + cy.get('[aria-current="page"]').should('contain', 'Cloud') + }) + + it('UI Coverage', () => { + cy.get('nav a').contains('UI Coverage').click() + cy.url().should('include', '/ui-coverage/get-started/introduction') + cy.get('[aria-current="page"]').should('contain', 'UI Coverage') + }) + + it('Accessibility', () => { + cy.get('nav a').contains('Accessibility').click() + cy.url().should('include', '/accessibility/get-started/introduction') + cy.get('[aria-current="page"]').should('contain', 'Accessibility') + }) + }) + + describe('Announcement Bar', () => { + it('should close when clicking close btn', () => { + cy.get('[role="banner"]').should('be.visible') + cy.get('.close').click() + cy.get('[role="banner"]').should('not.exist') + }) + }) + + describe('Dark mode', () => { + it('switch to dark mode when clicked', () => { + cy.get('[data-theme=light]') + .should('have.css', 'background-color', 'rgb(255, 255, 255)') // white + cy.get('[aria-label="Switch to dark mode"]').click() + cy.get('[data-theme=dark]') + .should('have.css', 'background-color', 'rgb(27, 30, 46)') // dark gray + }) + }) + + describe('Search', () => { + it('search opens search popup', () => { + cy.contains('Search āŒ˜K').click() + cy.get('.DocSearch-Modal').should('be.visible') + }) + }) + + describe('404', () => { + it('displays 404 page', () => { + cy.visit('/foo/bar/baz') + cy.get('h1') + .should('be.visible') + .and('have.text', 'Page Not Found') + }) + }) +}) + diff --git a/docs/accessibility/changelog.mdx b/docs/accessibility/changelog.mdx new file mode 100644 index 0000000000..cb88a85e4e --- /dev/null +++ b/docs/accessibility/changelog.mdx @@ -0,0 +1,131 @@ +--- +title: 'Changelog | Cypress Accessibility' +description: 'Stay up to date with the latest features, improvements, and bug fixes for Cypress Accessibility.' +sidebar_label: Changelog +sidebar_position: 200 +--- + + + +# Changelog + +## Week of 7/7/2025 + +- A new custom accessibility rule, ["Interactive elements should be semantically correct"](/accessibility/core-concepts/cypress-rules#Interactive-elements-should-be-semantically-correct), is now available. This rule is based on the interactions that take place during your test execution, and helps detect accessibility issues that are not a part of typical DOM-based accessibility scans. + +## Week of 6/2/2025 + +- We now support fetching Accessibility results from Drone CI with the [Results API](/accessibility/results-api). + +## Week of 5/26/2025 + +- A new [element identification](/accessibility/core-concepts/element-identification) algorithm is now available for Cypress Accessibility. This produces improved element deduplication across different snapshots and runs, and incorporates testing-specific attributes like Test IDs into the element recognition and deduplication process. This replaces the default Axe-CoreĀ® element identification behavior. +- Two new configuration options are available in Cypress Accessibility - [`significantAttributes`](/accessibility/configuration/significantattributes) and [`attributeFilters`](/accessibility/configuration/attributefilters). These allow you to fine-tune Cypress's element identification behavior to ensure stable and relevant locators are used. +- Branch Review for Cypress Accessibility is now generally available, with an updated interface for displaying new and resolved violations, based on feedback during the Beta period. Thank you all for hitting the feedback button! [Learn more about comparing reports](/accessibility/core-concepts/compare-reports). + +## Week of 5/12/2025 + +- We now support fetching Accessibility results from AWS CodeBuild with the [Results API](/accessibility/results-api). + +## Week of 3/24/2025 + +- Cypress Accessibility results are now included in the [Data Extract API](/cloud/integrations/data-extract-api) so that you can retrieve data over time. + +## Week of 3/10/2025 + +- The [Cypress Accessibility Results API](/accessibility/results-api) has been updated with additional details about accessibility scores and failed element counts at the run level. Also, view-level reporting has been added, breaking out accessibility report data by the pages and components covered in the report. These improvements support more advanced workflows based on the accessibility data in the API, such as alerting a specific team about violations in a part of the app they own, or implementing different standards for different parts of the application. + +## Week of 3/03/2025 + +- We've upgraded our axe-core version to [4.10.2](https://docs.deque.com/axe-release-impact/4.10.2/en/release-notes). +- The axe-core version used to generate a report can now be viewed in the Run Properties tab. + +## Week of 2/24/2025 + +- [Cypress Accessibility Branch Review](/accessibility/core-concepts/compare-reports) has entered beta. Read the docs to learn how to compare runs and automatically spot newly introduced issues. + +## Week of 1/13/2025 + +- Cypress Accessibility results are now included in the Enterprise Reporting area of Cypress Cloud. Filter by project and branch and see trends over time. + +## Week of 11/11/2024 + +- A "Share Issue" button has been added to the element details section for each reported rule violation. This allows for easily copying the key details and related links for a particular issue into your clipboard to add to a message or to a ticket in your issue tracking system. + +## Week of 10/28/2024 + +- Our [Axe CoreĀ® versioning policy](/accessibility/core-concepts/how-it-works#Axe-Core-updates) has been published, providing a 30-day buffer between any Axe CoreĀ® releases and the adoption of those releases in Cypress Cloud. + +## Week of 9/30/2024 + +- Cypress Accessibility results are now included in Slack messages alongside test results. [Learn more about our Slack integration here](/cloud/integrations/slack). + +## Week of 9/20/2024 + +- A minor bugfix was released for score calculations, to fix a scenario where some snapshots could be counted more than once if they appeared in multiple tests. This may result in a small difference in the total score for runs before and after the change. +- Documentation updates to reflect recently released features and capabilities. + +## Week of 9/9/2024 + +- We have introduced the new "Rules" tab for all users. This allows you to more easily review the outcome of all the rules that were tested for, across the entire run, and see which rules have the most failing elements. This also helps you understand the exact effect of any underlying configuration on rule outcomes. +- We have introduced new element statuses, beyond just failures. This allows Cypress Accessibility to surface any inconclusive or "manual review" items from Axe Core, as well as track and display elements whose results were explicitly ignored. Learn more in the [run-level reports](/accessibility/core-concepts/run-level-reports) [Elements section](/accessibility/core-concepts/run-level-reports#Elements). +- Elements ignored by configuration will have results captured, but these results will not affect your score. This ensures you can use filters to peek behind the curtain and understand exactly what is being excluded from a given run's results. +- The Detail View that displays failing elements will now also display inconclusive and (optionally) ignored elements for each rule. Inconclusive and ignored elements have distinct orange and gray icons and highlights respectively. + +## Week of 8/19/2024 + +- iFrames are now supported for accessibility checks. iFrame processing is _opt-in_ for existing customers, but new customers will begin with iFrames enabled and can choose to opt out instead. This is to avoid disrupting existing pipelines, especially because iFrame content is not _always_ something you want to include in your reports. +- Cypress Accessibility results will now appear in [GitHub](/cloud/integrations/source-control/github), [GitLab](/cloud/integrations/source-control/gitlab) and [Bitbucket](/cloud/integrations/source-control/bitbucket) pull request and merge request comments alongside test results. Integrations can be installed and comments can be enabled in Project Settings. + +## Week of 8/5/2024 + +- We now support fetching Accessibility results from CircleCI workflows with the [Results API](/accessibility/results-api). + +## Week of 7/29/2024 + +- Fetching results in Azure and Jenkins is now supported in the new [Results API](/accessibility/results-api), which enables you to programmatically fetch your run's Accessibility results in a CI environment. + +## Week of 7/15/2024 + +- The new [Results API](/accessibility/results-api), which enables you to programmatically fetch your run's Accessibility results in a CI environment, now supports fetching results in GitLab CI workflows. + +## Week of 6/24/2024 + +- We have added the new [Results API](/accessibility/results-api) which enables you to programmatically fetch your run's Accessibility results in a CI environment. This allows you to review the results within CI and to determine if the results are acceptable or need to be addressed before code changes can merge. +- View [configuration information for each run](/accessibility/configuration/overview#Viewing-Configuration-for-a-Run) in the properties tab. There, you'll find the configuration set for the project at the start of the run. This will help you understand what factors might be driving a score change. This helps distinguish config criteria changes from other factors such as changes to your application, tests, Cypress versions, and more. + +## Week of 5/20/2024 + +- Shadow DOM elements are now visible and highlighted in A11y report snapshots. By highlighting shadow DOM elements in snapshots, developers can identify and address all accessibility violations, including those within encapsulated components, thus enhancing the overall accessibility of the web application. +- You can now click directly into the accessibility report from any respective run from the "Latest Runs" page in Cypress Cloud. This improvement streamlines access and navigation to accessibility reports, saving you time and reducing the number of steps needed to view the details. +- We've added the ability to configure and customize your Accessibility report in Project Settings. You can set configuration through our editor equipped with linting and IntelliSense code completion. Control what should be tested or ignored in your score calculations to ensure your team is capturing what's relevant to your organization's goals. + +## Week of 4/15/2024 + +- We've added full depth axe-coreĀ® details for each element flagged with an accessibility violation, providing comprehensive context to help developers accurately identify and resolve issues. + +## Week of 3/25/2024 + +- The new Violation Severity Breakdown displays a small bar graph indicating the severity level of accessibility violations across the entire run, or on the level of individual pages or components. This gives users more information at a glance about what pages have the most severe problems, and the overall makeup of their accessibility report. Pages with more severe problems will now be more obvious when scanning the report, helping users decide what pages need more investigation or which pages have the fewest problems. + +## Week of 3/18/2024 + +- You can now refine your Views list by severity or specific rule sets. For instance, isolate pages featuring "Critical" violations only, or focus solely on WCAG 2.1 A violations. If your project has varying levels of accessibility, filtering pages or components with specific types of violations can serve as an initial step to comprehend and prioritize areas with the most severe issues. +- Cypress will now conduct accessibility checks within the Shadow DOM on all runs, expanding the accessibility testing scope. + +## Week of 2/25/2024 + +- We've introduced text filtering so that users can filter the "Views" list by name, making it effortless to search and locate specific items. +- To improve clarity and context, we've also implemented a tooltip-style feature that displays the position of the highlighted elements. This means that when an accessibility violation is reported and is associated with a specific element on the screen, it's a lot easier to locate. + +## Week of 1/15/2024 + +- We've introduced a new feature that streamlines accessibility management - the aggregation of all violations into a single comprehensive report. Look for the "View all" link next to the violations count at the top of the accessibility tab. This will show you all violations detected across an entire run, regardless of what page or component they are detected on. + +## Week of 12/31/2023 + +- Users can now discover and address accessibility violations swiftly by utilizing the newly integrated "Print Elements to Console" button within your browser's developer tools. + +## Week of 12/17/2023 + +- Users can now view a detailed breakdown of the total number of Views (pages and/or components) and Violations detected during a specific run. diff --git a/docs/accessibility/configuration/_category_.json b/docs/accessibility/configuration/_category_.json new file mode 100644 index 0000000000..7f8cb5b6d7 --- /dev/null +++ b/docs/accessibility/configuration/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Configuration", + "position": 40 +} diff --git a/docs/accessibility/configuration/attributefilters.mdx b/docs/accessibility/configuration/attributefilters.mdx new file mode 100644 index 0000000000..0f161f1ee5 --- /dev/null +++ b/docs/accessibility/configuration/attributefilters.mdx @@ -0,0 +1,16 @@ +--- +title: 'Attribute Filters | Cypress Accessibility' +description: 'The `attributeFilters` configuration property allows users to specify patterns for attributes and their values that should not be used for identifying and grouping elements.' +sidebar_label: attributeFilters +sidebar_position: 50 +--- + + + +# attributeFilters + +Cypress Accessibility [identifies elements](/ui-coverage/core-concepts/element-identification) based on a combination of attributes and the surrounding DOM structure. + +{' '} + + diff --git a/docs/accessibility/configuration/axe-core-configuration.mdx b/docs/accessibility/configuration/axe-core-configuration.mdx new file mode 100644 index 0000000000..98f86a7442 --- /dev/null +++ b/docs/accessibility/configuration/axe-core-configuration.mdx @@ -0,0 +1,34 @@ +--- +title: 'Axe CoreĀ® configuration | Cypress Accessibility' +description: 'Configuration for Axe-CoreĀ® rules can be configured.' +sidebar_label: 'Axe CoreĀ® configuration' +--- + + + +# Axe CoreĀ® configuration + +Configuration for Axe-CoreĀ® rules is available through your Account Executive. We are happy to have a call with you to dial in your report config to make sure you are getting the most useful reports possible, and we find this onboarding very effective. + +In most cases, configuration of these rules as they run in Cypress Cloud isn't needed, because your implementation of any policies about what should "fail a build" is handled using the [Accessibility Results API](/accessibility/results-api), where you have full control over how to parse the results and what rules need to be reacted to. Keeping the results in Cypress Cloud broad helps you to still be able to see and understand all of the accessibility information, even if only a subset of the results would be considered blocking. + +**Note.** Certain Axe CoreĀ® rules are off by default. Here are the rules that are currently either ignored by configuration, or for which results cannot be detected. + +- `Elements must meet minimum color contrast ratio thresholds` + - This is off by default. This is both the slowest rule in the Axe CoreĀ® ruleset, and the one that can have the highest percentage of false positives or incomplete checks. + - It does work perfectly in many projects, so we are happy to turn this on for you if requested, so that you can see the results. +- `