Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 61 additions & 4 deletions flaky-tests/get-started/frameworks/cypress.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 `<testsuite>` 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
Expand All @@ -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 %}

<details>

<summary>Why does the built-in reporter cause this warning?</summary>

The built-in Mocha reporter produces XML where the `file` attribute and the `<testcase>` elements are in **sibling** `<testsuite>` elements rather than in a parent-child hierarchy:

```xml
<testsuites name="Mocha Tests">
<!-- file attribute is here... -->
<testsuite name="Root Suite" file="cypress/e2e/example.cy.js">
</testsuite>
<!-- ...but test cases are in a sibling, not a child -->
<testsuite name="My Test Suite">
<testcase name="should do something" classname="does something">
</testcase>
</testsuite>
</testsuites>
```

Trunk resolves attributes like `file` by walking **up** the XML hierarchy from each `<testcase>`. Because the `file` attribute lives on an adjacent `<testsuite>` 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.

</details>

#### 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

Expand Down
Loading