diff --git a/flaky-tests/get-started/frameworks/cypress.md b/flaky-tests/get-started/frameworks/cypress.md index b74766b9..49c06099 100644 --- a/flaky-tests/get-started/frameworks/cypress.md +++ b/flaky-tests/get-started/frameworks/cypress.md @@ -11,7 +11,7 @@ You can automatically [detect and manage flaky tests](../../detection.md) in you By the end of this guide, you should achieve the following before proceeding to the [next steps](cypress.md#next-step) to configure your CI provider. -* [ ] Generate a compatible test report +* [ ] Generate a compatible test report (with file paths for best results) * [ ] Configure the report file path or glob * [ ] Disable retries for better detection accuracy * [ ] Test uploads locally @@ -20,9 +20,37 @@ After correctly generating reports following the above steps, you'll be ready to ### Generating Reports -Cypress has a built-in XML reporter which you can use to output a Trunk-compatible report. +Cypress supports JUnit XML output through its built-in Mocha reporter and through third-party plugins. We recommend the **Sauce Labs Cypress JUnit Plugin** for the best experience with Trunk. -Update your Cypress config, such as you `cypress.config.js` or `cypress.config.ts` file to output XML reports: +#### Recommended: Sauce Labs Cypress JUnit Plugin + +The [`cypress-junit-plugin`](https://github.com/saucelabs/cypress-junit-plugin) produces JUnit XML reports with properly structured file paths on each test case. This enables Trunk features like **file path filtering** and **Code Owners** matching. + +Install the plugin: + +```bash +npm install --save-dev @saucelabs/cypress-junit-plugin +``` + +Update your Cypress config to use the plugin: + +{% code title="cypress.config.js" %} +```javascript +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + reporter: '@saucelabs/cypress-junit-plugin', + reporterOptions: { + outputDirectory: './', + outputFileName: 'junit.xml', + }, +}) +``` +{% endcode %} + +#### Alternative: Built-in Mocha Reporter + +Cypress also has a built-in Mocha JUnit reporter. This reporter works for basic uploads, but it places the `file` attribute on a sibling `` element rather than directly on test cases. Because Trunk expects a hierarchical structure for inheriting attributes like file paths, this means **file paths and Code Owners will not be available** for your tests in the Trunk dashboard. {% code title="cypress.config.js" %} ```javascript @@ -38,9 +66,38 @@ module.exports = defineConfig({ ``` {% endcode %} +{% hint style="info" %} +If you use the built-in reporter, you will see a warning during upload: `report has test cases with missing file or filepath`. This warning does not prevent the upload from succeeding, but tests will not have file paths or Code Owners associated with them. +{% endhint %} + +
+ +Why does the built-in reporter cause this warning? + +The built-in Mocha reporter produces XML where the `file` attribute and the `` elements are in **sibling** `` elements rather than in a parent-child hierarchy: + +```xml + + + + + + + + + + +``` + +Trunk resolves attributes like `file` by walking **up** the XML hierarchy from each ``. Because the `file` attribute lives on an adjacent `` rather than a parent, it is not inherited by the test cases. + +The Sauce Labs plugin solves this by placing file path information directly on each test case in a properly nested structure. + +
+ #### Report File Path -The JUnit report location is specified by the `mochaFile` property in your Cypress config. In the above example, the file will be at `./junit.xml`. +When using the Sauce Labs plugin, the report location is specified by the `outputDirectory` and `outputFileName` options. When using the built-in Mocha reporter, the location is specified by the `mochaFile` property. In both examples above, the file will be at `./junit.xml`. #### Disable Retries