|
1 |
| -# cypress-slack-reporter |
| 1 | +# cypress-plugins |
2 | 2 |
|
3 |
| -[](https://badge.fury.io/js/cypress-slack-reporter) |
4 |
| - |
5 |
| -[](https://circleci.com/gh/YOU54F/cypress-slack-reporter) |
6 |
| -[](https://travis-ci.org/YOU54F/cypress-slack-reporter) |
7 |
| -[](https://codeclimate.com/github/YOU54F/cypress-slack-reporter/maintainability) |
8 |
| -[](https://coveralls.io/github/YOU54F/cypress-slack-reporter) |
9 |
| - |
| 3 | +Various cypress plugins, some of which I've created, some I've adopted. |
10 | 4 |
|
11 |
| -A Slack Reporting tool built for Cypress but _should_ work with any mocha based framework that is using [mochawesome](https://github.com/adamgruber/mochawesome/) |
| 5 | +It's easier for me to have them all in one place. |
12 | 6 |
|
13 |
| -<!-- [](https://circleci.com/gh/YOU54F/cypressio-slack-reporter) |
14 |
| -[](https://sonarcloud.io/dashboard?id=YOU54F_cypressio-slack-reporter) --> |
| 7 | +- `cypress-jest` - A jest test runner to execute Cypress tests |
| 8 | +- `cypress-openapi` - Generate cypress tests from OpenAPI specs |
| 9 | +- `cypress-buckets` - split your cypress test files into multiple circleci workflows |
| 10 | +- `cypress-circleci` - split your cypress test files into multiple circleci workflows |
| 11 | +- `cypress-cognito-srp` - login via cognito for `USER_SRP_AUTH` auth flow, via name and password |
| 12 | +- `cypress-dynamic-data` - generate test data from Excel or CSV files. |
| 13 | +- `cypress-slack-reporter` - send rich test results to slack |
| 14 | +- `cypress-multi-reporters` - Use multiple reporters in your tests |
15 | 15 |
|
16 |
| -- Slack reporter with integration with CircleCI |
17 |
| - - Reports Github/BitBucket Triggering Commit Details |
18 |
| - - Reports CirleCI Build Logs / Status / Artefacts |
19 |
| - - Reports Test Status & Provides Report Links |
20 |
| -- Takes the output of Mochawesome JSON output to determine test result & corresponding slack message |
21 |
| -- Provides a URL link to the Test Artefacts (Mochawesome HTML Test Report / Cypress Video & Screenshots) |
22 |
| -- Programatically run Cypress via a script file with full report generation and Slack Reporting. |
| 16 | +## Templates |
23 | 17 |
|
24 |
| -For users who are not using CircleCi, you can get a simple report |
| 18 | +- `cypress-pact` - generate a scaffold project utilising @pactflow/pact-cypress-adapter |
| 19 | +- `cypress-msw-pact` - generate a scaffold project utilising @pactflow/pact-msw-adapter |
| 20 | +- `cypress-serverless` - run cypress in a lambda with serverless |
| 21 | +- `cypress-docker-typescript` - Will scaffold the example repository used to showcase the plugins, in a location of the users choice. |
25 | 22 |
|
26 |
| -- pass `--ci-provider none` provider flag to provide a simple slack message based on the mochawesome report status |
27 |
| -- Pass `--custom-url` along with `--ci-provider custom --custom-url=http://example.com` to set custom report page url. that will be sent to slack. |
| 23 | +## Documentation |
28 | 24 |
|
29 |
| -_NOTE_: Custom URL's do not have trailing forward slashes |
| 25 | +- `cypress-plugins-site` - The website, built with Docusaurus V2 and deployed via Vercel |
30 | 26 |
|
31 |
| -For jenkins users |
| 27 | +## Example |
32 | 28 |
|
33 |
| -- pass `--ci-provider jenkins` provider flag. |
| 29 | +The `cypress-docker-typescript` scaffolded example will generate a project with the following. |
34 | 30 |
|
35 |
| -## Reporting Features |
| 31 | +It contains |
36 | 32 |
|
37 |
| -It provides the following distinct message types |
38 |
| - |
39 |
| -- Build Failure / Cypress error |
40 |
| -- Test Failure |
41 |
| -- Test Success |
42 |
| - |
43 |
| -It provides the following information |
44 |
| - |
45 |
| -- CircleCI Build Status |
46 |
| -- Test Stats (Total Tests / Passes / Failures) |
47 |
| -- Author with link to Github commit |
48 |
| -- Branch name |
49 |
| -- Pull Request number and link to PR (only if PR) |
50 |
| - |
51 |
| -And the following build/test artefacts |
52 |
| - |
53 |
| -- CircleCI Build Log button |
54 |
| -- HTML Test report button (only on build success) |
55 |
| -- Videos of test runs (one link per test) |
56 |
| -- Screenshots of failed tests (one link per failing test) |
57 |
| - |
58 |
| -### Screenshots showing Slack Alert Format |
59 |
| - |
60 |
| - |
61 |
| - |
62 |
| -## Installation |
63 |
| - |
64 |
| -Note _Please see the pre-requisites folder to current neccessary pre-requisites_ |
65 |
| - |
66 |
| -1. Install the app |
67 |
| - |
68 |
| - \$ yarn add cypress-slack-reporter --dev |
69 |
| - |
70 |
| - or |
71 |
| - |
72 |
| - \$ npm install cypress-slack-reporter --save-dev |
73 |
| - |
74 |
| -2. Create a Slack app & create an incoming webhook |
75 |
| - |
76 |
| -- [Slack Apps](https://api.slack.com/slack-apps) |
77 |
| - |
78 |
| -Set the following environment variables in your localhost or CI configuration. |
79 |
| - |
80 |
| -- `SLACK_WEBHOOK_URL` - The full URL you created in the last step |
81 |
| - |
82 |
| - eg. `export SLACK_WEBHOOK_URL=yourWebhookUrlHere` |
83 |
| - |
84 |
| -You can optionally set one or more of the following env vars, to utilise a different slack webhook, dependent on the status of your build or test run. |
85 |
| - |
86 |
| -- `SLACK_WEBHOOK_ERROR_URL` - For failing CI runs |
87 |
| -- `SLACK_WEBHOOK_FAILED_URL` - For failing test runs |
88 |
| -- `SLACK_WEBHOOK_PASSED_URL` - For passing test runs |
89 |
| - |
90 |
| -Any of the 4 env vars above with accept a comma seperated list of webhooks, if you wish to post your slack message to multiple webhooks (one webhook per channel in slack). |
91 |
| - |
92 |
| -eg. `export SLACK_WEBHOOK_URL=your1stWebhookUrlHere,your2ndWebhookUrlHere` |
93 |
| - |
94 |
| -## Execution |
95 |
| - |
96 |
| - $ npx cypress-slack-reporter --help |
97 |
| - |
98 |
| - Usage: index.ts [options] |
99 |
| - |
100 |
| - Options: |
101 |
| - -v, --version output the version number |
102 |
| - --vcs-provider [type] VCS Provider [github|bitbucket|none] (default: "github") |
103 |
| - --ci-provider [type] CI Provider [circleci|jenkins|bitbucket|none|custom] (default: "circleci") |
104 |
| - --custom-url [type] On selected --ci-provider=custom this link will be set to Test Report (default: "") |
105 |
| - --report-dir [type] mochawesome json & html test report directory, relative to your package.json (default: "mochareports") |
106 |
| - --screenshot-dir [type] cypress screenshot directory, relative to your package.json (default: "cypress/screenshots") |
107 |
| - --video-dir [type] cypress video directory, relative to your package.json (default: "cypress/videos") |
108 |
| - --verbose show log output |
109 |
| - --only-failed only send message for failed tests |
110 |
| - --custom-text [type] add additional text to message, wrap message in quotes |
111 |
| - -h, --help display help for command |
112 |
| - |
113 |
| -## Pre-Requisites |
114 |
| - |
115 |
| -- A test tool capable of utilising mochawesome to report results |
116 |
| -- [mochawesome](https://github.com/adamgruber/mochawesome/) for json test result generation |
117 |
| -- [mochawesome-merge](https://github.com/Antontelesh/mochawesome-merge) to combine multiple mochawesome reports |
118 |
| -- [mochawesome-report-generator](https://github.com/Antonteleshmochawesome-report-generator) to generate a HTML report, from your mochawesome json test results |
119 |
| -- [cypress-multi-reporters](https://github.com/you54f/cypress-multi-reporters) to allow you to use multple reporters, in case you require other outputs (junit/spec etc) |
120 |
| - |
121 |
| -Yarn installation Instructions |
122 |
| - |
123 |
| -```sh |
124 |
| - yarn add mochawesome --dev |
125 |
| - yarn add mochawesome-merge --dev |
126 |
| - yarn add mochawesome-report-generator --dev |
127 |
| - yarn add cypress-multi-reporters --dev |
128 |
| -``` |
129 |
| - |
130 |
| -NPM installation Instructions |
131 |
| - |
132 |
| -```sh |
133 |
| - npm install mochawesome --save-dev |
134 |
| - npm install mochawesome-merge --save-dev |
135 |
| - npm install mochawesome-report-generator --save-dev |
136 |
| - npm install cypress-multi-reporters --save-dev |
137 |
| -``` |
138 |
| - |
139 |
| -- Add the following in the base of your project |
140 |
| - |
141 |
| -cypress.json |
142 |
| - |
143 |
| -```json |
144 |
| -{ |
145 |
| - ... |
146 |
| - "reporter": "cypress-multi-reporters", |
147 |
| - "reporterOptions": { |
148 |
| - "configFile": "reporterOpts.json" |
149 |
| - } |
150 |
| -} |
151 |
| - |
152 |
| -``` |
153 |
| - |
154 |
| -reporterOpts.json |
155 |
| - |
156 |
| -```json |
157 |
| -{ |
158 |
| - "reporterEnabled": "mochawesome", |
159 |
| - "mochawesomeReporterOptions": { |
160 |
| - "reportDir": "cypress/reports/mocha", |
161 |
| - "quiet": true, |
162 |
| - "overwrite": false, |
163 |
| - "html": false, |
164 |
| - "json": true |
165 |
| - } |
166 |
| -} |
167 |
| -``` |
168 |
| - |
169 |
| -## CircleCI |
170 |
| - |
171 |
| -This project is building in CircleCI and can be viewed at the following link |
172 |
| - |
173 |
| -[CircleCI Build](https://circleci.com/gh/YOU54F/cypress-slack-reporter) |
174 |
| - |
175 |
| -See the `.circleci` folder |
176 |
| - |
177 |
| -- `config.yml` - Contains the CircleCI build configuration |
178 |
| - |
179 |
| -The following env vars are read for CircleCI users. |
180 |
| - |
181 |
| -- `CIRCLE_SHA1` - The SHA1 hash of the last commit of the current build |
182 |
| -- `CIRCLE_BRANCH` - The name of the Git branch currently being built. |
183 |
| -- `CIRCLE_USERNAME` - The GitHub or Bitbucket username of the user who triggered the build. |
184 |
| -- `CIRCLE_BUILD_URL` - The URL for the current build. |
185 |
| -- `CIRCLE_BUILD_NUM` - The number of the CircleCI build. |
186 |
| -- `CIRCLE_PULL_REQUEST` - Comma-separated list of URLs of the current build’s associated pull requests. |
187 |
| -- `CIRCLE_PROJECT_REPONAME` - The name of the repository of the current project. |
188 |
| -- `CIRCLE_PROJECT_USERNAME` - The GitHub or Bitbucket username of the current project. |
189 |
| -- `CI_URL="https://circleci.com/api/v1.1/project"` |
190 |
| -- `CIRCLE_PROJECT_ID` - This project ID used in artefact URLS |
191 |
| - |
192 |
| -If you wish to use another CI provider, you can pass any name other than `circleci` into the CLI flag `--ci-provider`, which will allow you to enter your own environment variables for CI. |
193 |
| - |
194 |
| -- `CI_URL` |
195 |
| -- `CI_SHA1`, |
196 |
| -- `CI_BRANCH`, |
197 |
| -- `CI_USERNAME`, |
198 |
| -- `CI_BUILD_URL`, |
199 |
| -- `CI_BUILD_NUM`, |
200 |
| -- `CI_PULL_REQUEST`, |
201 |
| -- `CI_PROJECT_REPONAME` |
202 |
| -- `CI_PROJECT_USERNAME` |
203 |
| - |
204 |
| -### CircleCI Artifact Notes |
205 |
| - |
206 |
| -CircleCI have recently changed the API for retrieving API's. A URL is generated for artifacts in the format |
207 |
| - |
208 |
| -`https://${CI_BUILD_NUM}-${CI_PROJECT_ID}-gh.circle-artifacts.com/0` |
209 |
| - |
210 |
| -You can get the `CIRCLE_PROJECT_ID` by checking [https://circleci.com/docs/api/#artifacts-of-a-build](https://circleci.com/docs/api/#artifacts-of-a-build) |
211 |
| - |
212 |
| -For example. the ID for this project is `177880476`, you can see it in the following URL |
213 |
| - |
214 |
| -`https://circleci.com/api/v1.1/project/github/YOU54F/cypress-slack-reporter/1/artifacts` |
215 |
| - |
216 |
| -which will return |
217 |
| - |
218 |
| -```json |
219 |
| -[ { |
220 |
| - "path" : "root/app/mochareports/.gitignore", |
221 |
| - "pretty_path" : "root/app/mochareports/.gitignore", |
222 |
| - "node_index" : 0, |
223 |
| - "url" : "https://1-177880476-gh.circle-artifacts.com/0/root/app/mochareports/.gitignore" |
224 |
| -}, |
225 |
| -... |
226 |
| -] |
227 |
| -``` |
228 |
| - |
229 |
| -In order to correctly construct your artifact URL, you will need to manually retrieve this ID and set it as an env var titled `CIRCLE_PROJECT_ID` |
230 |
| - |
231 |
| -`EXPORT CIRCLE_PROJECT_ID=177880476` |
232 |
| - |
233 |
| -in windows |
234 |
| - |
235 |
| -`SET CIRCLE_PROJECT_ID=177880476` |
236 |
| - |
237 |
| -or in your CircleCI project's environment page. |
238 |
| - |
239 |
| -There is also another workaround by setting a destination option in store_artifacts job in config.yml (CircleCI). |
240 |
| - |
241 |
| -``` |
242 |
| -- store_artifacts: |
243 |
| - path: ~/path/to/cypress/videos |
244 |
| - destination: cypress/videos |
245 |
| -``` |
246 |
| - |
247 |
| -will allow you to access artifacts through |
248 |
| -https://${CI_BUILD_NUM}-${CI_PROJECT_ID}-gh.circle-artifacts.com/0/cypress/videos/some_test_result.mp4 |
249 |
| - |
250 |
| -This is what it says on CircleCI Documentation: |
251 |
| - |
252 |
| -``` |
253 |
| -Currently, store_artifacts has two keys: path and destination. |
254 |
| -
|
255 |
| -path is a path to the file or directory to be uploaded as artifacts. |
256 |
| -destination (Optional) is a prefix added to the artifact paths in the artifacts API. The directory of the file specified in path is used as the default. |
257 |
| -``` |
258 |
| - |
259 |
| -## Scripted Runner |
260 |
| - |
261 |
| -An example script is [here](./src/cli/spec.ts) as `cli/spec/ts` |
262 |
| - |
263 |
| -A example of how you can use this script in your project to:- |
264 |
| - |
265 |
| -- Run Cypress with Mochawesome & junit reporters |
266 |
| -- Merge mochawesome reports with `mochawesome-merge` |
267 |
| -- Construct a slack alert with the merged report, screenshots and videos |
268 |
| - |
269 |
| -Either with the cli |
270 |
| - |
271 |
| -```bash |
272 |
| -./node_modules/.bin/cypress-slack-reporter-full |
273 |
| -``` |
274 |
| - |
275 |
| -Or with your own script |
276 |
| - |
277 |
| -```bash |
278 |
| -rm -rf ./cypress/reports/mocha && npx ts-node script.ts |
279 |
| -``` |
280 |
| - |
281 |
| -It can be called with the following options |
282 |
| - |
283 |
| -``` |
284 |
| -interface SlackRunnerOptions { |
285 |
| - ciProvider: string; |
286 |
| - vcsRoot: string; |
287 |
| - reportDir: string; |
288 |
| - videoDir: string; |
289 |
| - screenshotDir: string; |
290 |
| - customUrl?: string; |
291 |
| - onlyFailed?: boolean; |
292 |
| -} |
293 |
| -``` |
294 |
| - |
295 |
| -And will return a Slack IncomingWebhookResult. |
296 |
| - |
297 |
| -## TODO |
298 |
| - |
299 |
| -- [x] provide user ability to provide own CI artefact paths |
300 |
| -- [ ] typescript s3 uploader scripts and add to CLI |
301 |
| - - [x] tsified |
302 |
| - - [x] able to run in isolation |
303 |
| - - [x] mock aws-sdk s3 upload function |
304 |
| - - [x] tests |
305 |
| - - [x] retrieve s3 links for test report/artefacts and inject into the slack report |
306 |
| - - [x] uploading artefacts to s3 |
307 |
| - - [ ] add to CLI |
308 |
| - - [ ] programatically run |
309 |
| - - [ ] Add into main slack-reporter script |
310 |
| - - [ ] provide CLI options to provide paths/credentials |
311 |
| -- [x] Programatically run |
312 |
| - - [x] provide ability to be programatically run via a script |
313 |
| - - [x] provide example |
314 |
| - - [x] add usage instructions to readme |
315 |
| - - [x] test example |
316 |
| - - [x] compile |
317 |
| -- [x] Migrate Slack mock to seperate module available at [npm - slack-mock-typed](https://www.npmjs.com/package/slack-mock-typed) |
318 |
| -- Additional CI providers |
319 |
| - - [x] Jenkins |
320 |
| - |
321 |
| -## Contributors |
322 |
| - |
323 |
| - |
324 |
| - |
325 |
| -- With thanks to [mikepsinn](https://github.com/mikepsinn) for Jenkins support. |
326 |
| -- With thanks to [samswartz13](https://github.com/samswartz13) for bug fixes |
327 |
| -- With thanks to [ayushipatel126](https://github.com/ayushipatel126) for dotenv support. |
328 |
| -- With thanks to [saikatharryc](https://github.com/saikatharryc) for custom url support. |
| 33 | +- `Typescript` |
| 34 | +- The `Cypress` GUI tool |
| 35 | +- The `Cypress` CLI tool |
| 36 | +- `CircleCI` / `GitHub Actions` workflows |
| 37 | +- `cypress-mochawesome-reporter` for fancy test reports |
| 38 | +- `cypress-slack-reporter` for upload your reports to slck |
| 39 | +- `cypress-failed-logs` devTools console log output on test fail |
| 40 | +- Easy to wire up with Cypress' Dashboard Service for project recording |
| 41 | +- `Dockerfile` to self contain the application and require no pre-requisites on the host machine, bar `Docker`. |
0 commit comments