Skip to content

Commit

Permalink
chore: add tests and improve docs for cypress-cucumber-preprocessor (#…
Browse files Browse the repository at this point in the history
…175)

* chore: add tests and improve docs for cypress-cucumber-preprocessor

* use node 18

* try install with --concurrency 1
  • Loading branch information
LironEr committed Dec 29, 2023
1 parent c5c14ec commit 28ed426
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 78 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Zero config Mochawesome reporter for Cypress with screenshots attached to tests.
import 'cypress-mochawesome-reporter/cucumberSupport';
```

> ⚠️ `cypress-cucumber-preprocessor` uses the same hooks as `cypress-mochawesome-reporter`, you also need to install [cypress-on-fix](https://github.com/bahmutov/cypress-on-fix).
> ⚠️ `cypress-cucumber-preprocessor` uses the same hooks as `cypress-mochawesome-reporter`, you also need to install [cypress-on-fix](https://github.com/bahmutov/cypress-on-fix). Full example of using `cypress-mochawesome-reporter` with `cypress-cucumber-preprocessor` can be found [here](examples/cucumber).

5. run cypress

Expand Down Expand Up @@ -121,7 +121,7 @@ module.exports = defineConfig({
Additional reporter options:

| name | type | default | description |
|-----------------------| --------- | ------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| --------------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `embeddedScreenshots` | `boolean` | `false` | Embedded external screenshots into HTML using base64, use with `inlineAssets` option to produce a single HTML file |
| `ignoreVideos` | `boolean` | `false` | Will not copy videos recorded by Cypress nor show them in the mochawesome report. Requires that Cypress config option `video` is set to `true` for the option to have any effect<br/>Because mochawesome doesn't support context per spec file, each test will have the whole spec file video. More info can be found [here](https://github.com/LironEr/cypress-mochawesome-reporter/issues/43) |
| `videoOnFailOnly` | `boolean` | `false` | If Videos are recorded and added to the report, setting this to `true` will add the videos only to tests with failures.<br/>Do not that this will NOT cause video's to only record failed tests, just they not be added to passed tests in the mochawesome report |
Expand All @@ -143,6 +143,7 @@ Add extra information to the report manually by using `cy.addTestContext()` as s
4. [Change default screenshots folder in `cypress.json`](examples/screenshots-folder)
5. [Using `cypress-mochawesome-reporter` with typescript](examples/simple-typescript)
6. [Using `cypress-mochawesome-reporter` with `cypress-parallel`](examples/cypress-parallel)
7. [Using `cypress-mochawesome-reporter` with `cypress-cucumber-preprocessor`](examples/cucumber)

Run `npm i` in root directory then:

Expand Down
104 changes: 104 additions & 0 deletions cypress/e2e/cucumber.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
describe(`cucumber folder`, () => {
beforeEach(() => {
cy.visit(`examples/cucumber/cypress/reports/html/index.html`);
});

it('Validate all tests exists', () => {
cy.get('li[title="Suites"]').contains(1);
cy.get('li[title="Tests"]').contains(5);
cy.get('li[title="Passed"]').contains(4);
cy.get('li[title="Failed"]').contains(1);
});

it('screenshot exist for failed test', () => {
// 2 retries
cy.validateTestHasScreenshot('fail', 2);
});

it('video exist for tests', () => {
cy.validateTestHasVideo('pass');
cy.validateTestHasVideo('fail');
cy.validateTestHasVideo('pass with examples (example #1)');
cy.validateTestHasVideo('pass with examples (example #2)');
cy.validateTestHasVideo('pass with examples (example #3)');
});

describe('Validate test code text', () => {
it('pass', () => {
cy.validateTestCode(
'pass',
`
Feature: Test 1
Scenario: pass
When I visit "site/index.html"
Then The list has 4 items
`
);
});

it('fail', () => {
cy.validateTestCode(
'fail',
`
Feature: Test 1
Scenario: fail
When I visit "site/index.html"
Then The list has 5 items
`
);
});

it('pass with examples (example #1)', () => {
cy.validateTestCode(
'pass with examples (example #1)',
`
Feature: Test 1
Scenario Outline: pass with examples
When I visit "site/index.html"
Then The list has more than <num> items
Examples:
| num |
| 1 |
`
);
});

it('pass with examples (example #2)', () => {
cy.validateTestCode(
'pass with examples (example #2)',
`
Feature: Test 1
Scenario Outline: pass with examples
When I visit "site/index.html"
Then The list has more than <num> items
Examples:
| num |
| 2 |
`
);
});

it('pass with examples (example #3)', () => {
cy.validateTestCode(
'pass with examples (example #3)',
`
Feature: Test 1
Scenario Outline: pass with examples
When I visit "site/index.html"
Then The list has more than <num> items
Examples:
| num |
| 3 |
`
);
});
});
});
65 changes: 42 additions & 23 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,51 @@ Cypress.Commands.add('validateTestHasScreenshot', (testTitle, numberOfScreenshot
});
});
});

Cypress.Commands.add('validateTestHasVideo', (testTitle) => {
cy.get(`[title="${testTitle}"]`)
.click()
.parents('li[class*="test--component"]')
.then(([$el]) => {
cy.wrap($el)
.find('video')
.then(($vids) => {
cy.wrap($vids)
.should('have.length', 1)
.each(([$vid]) => {
cy.wrap($vid)
.should('be.visible')
.find('source')
.should('have.attr', 'type', 'video/mp4')
});
});
cy.get(`[title="${testTitle}"]`)
.click()
.parents('li[class*="test--component"]')
.then(([$el]) => {
cy.wrap($el)
.find('video')
.then(($vids) => {
cy.wrap($vids)
.should('have.length', 1)
.each(([$vid]) => {
cy.wrap($vid).should('be.visible').find('source').should('have.attr', 'type', 'video/mp4');
});
});
});
});

Cypress.Commands.add('validateTestHasNoVideo', (testTitle) => {
cy.get(`[title="${testTitle}"]`)
.click()
.parents('li[class*="test--component"]')
.then(([$el]) => {
cy.wrap($el)
.find('video')
.should('not.exist')
cy.get(`[title="${testTitle}"]`)
.click()
.parents('li[class*="test--component"]')
.then(([$el]) => {
cy.wrap($el).find('video').should('not.exist');
});
});

Cypress.Commands.add('validateTestCode', (testTitle, content) => {
// cy.get('code').debug();
cy.get(`[title="${testTitle}"]`)
.click()
.parents('li[class*="test--component"]')
.then(([$el]) => {
cy.wrap($el)
.find('code')
.then(($codes) => {
cy.wrap($codes)
.last()
.wrap(($code) => {
cy.wrap($code)
.should('be.visible')
.wrap(($c) => {
expect($c.text().trim(), 'match content').to.be.equal(content.trim());
});
});
});
});
});
47 changes: 47 additions & 0 deletions examples/cucumber/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Setup with `cypress-cucumber-preprocessor`

> ⚠️ `@badeball/cypress-cucumber-preprocessor` require node >= 18
1. Follow the steps in the [main README](../../README.md) to setup the reporter.

1. Your `cypress.config.js` file should look like:

```js
const { defineConfig } = require('cypress');
const cypressOnFix = require('cypress-on-fix');
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');

module.exports = defineConfig({
reporter: 'cypress-mochawesome-reporter',
video: true,
retries: 1,
e2e: {
specPattern: 'cypress/e2e/**/*.feature',
async setupNodeEvents(on, config) {
// "cypress-on-fix" is required because "cypress-mochawesome-reporter" and "cypress-cucumber-preprocessor" use the same hooks
on = cypressOnFix(on);

require('cypress-mochawesome-reporter/plugin')(on);

await addCucumberPreprocessorPlugin(on, config);

on(
'file:preprocessor',
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);

return config;
},
},
});
```

1. Add to `cypress/support/step_definitions/index.js`

```js
import 'cypress-mochawesome-reporter/cucumberSupport';
```
2 changes: 2 additions & 0 deletions examples/cucumber/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
},
"license": "MIT",
"devDependencies": {
"@badeball/cypress-cucumber-preprocessor": "^19.2.0",
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
"cypress": "^13.1.0",
"cypress-on-fix": "^1.0.2",
"cypress-mochawesome-reporter": "../../"
Expand Down
50 changes: 0 additions & 50 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"scripts": {
"lerna": "lerna",
"install-examples": "lerna exec --scope @example/* \"npm i\"",
"install-examples": "lerna exec --concurrency 1 --scope @example/* \"npm i\"",
"test:prepare": "lerna run --stream --no-bail --concurrency 1 --scope @example/* test",
"test": "cypress run",
"cypress:open": "cypress open"
Expand All @@ -41,7 +41,6 @@
},
"devDependencies": {
"@badeball/cypress-cucumber-preprocessor": "^19.2.0",
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
"cypress": "^13.1.0",
"lerna": "^7.1.4"
},
Expand All @@ -52,6 +51,7 @@
"lib",
"register.js",
"plugin.js",
"index.d.ts"
"index.d.ts",
"cucumberSupport.js"
]
}

0 comments on commit 28ed426

Please sign in to comment.