{"id":16323495,"url":"https://github.com/you54f/template-cypress-docker-typescript","last_synced_at":"2025-03-20T22:31:40.254Z","repository":{"id":40294142,"uuid":"159580453","full_name":"YOU54F/template-cypress-docker-typescript","owner":"YOU54F","description":"UI Test Framework Written in Typescript using Cypress.io","archived":false,"fork":false,"pushed_at":"2023-05-17T21:15:03.000Z","size":2179,"stargazers_count":43,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-11T22:55:14.081Z","etag":null,"topics":["boilerplate","circleci","cypress","cypress-slack-reporter","docker","example","gui","slack","testing","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YOU54F.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-28T23:47:38.000Z","updated_at":"2024-06-10T19:01:53.000Z","dependencies_parsed_at":"2024-10-28T09:08:13.986Z","dependency_job_id":"11b21119-68de-46c0-9a25-0f2e27af1489","html_url":"https://github.com/YOU54F/template-cypress-docker-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOU54F%2Ftemplate-cypress-docker-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOU54F%2Ftemplate-cypress-docker-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOU54F%2Ftemplate-cypress-docker-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOU54F%2Ftemplate-cypress-docker-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YOU54F","download_url":"https://codeload.github.com/YOU54F/template-cypress-docker-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244703921,"owners_count":20496203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","circleci","cypress","cypress-slack-reporter","docker","example","gui","slack","testing","typescript"],"created_at":"2024-10-10T22:54:57.797Z","updated_at":"2025-03-20T22:31:39.895Z","avatar_url":"https://github.com/YOU54F.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress IO Typescript Example\n\n[![CircleCI](https://circleci.com/gh/YOU54F/cypress-docker-typescript.svg?style=svg)](https://circleci.com/gh/YOU54F/cypress-docker-typescript)\n[![Sonarcloud Status](https://sonarcloud.io/api/project_badges/measure?project=YOU54F_cypressio-docker-typescript\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=YOU54F_cypressio-docker-typescript)\n\nThis is an example project testing a few different sites\n\nIt showcases the use of:-\n\n- Typescript\n- The Cypress GUI tool\n- The Cypress command line tool\n- Cypress custom commands `cy.foo()`\n- PageObject Models on a Login Site\n- Resuable Web Selectors\n- CircleCI integration\n- Slack reporting\n- Mochawesome for fancy HTML reporting\n- DevTools console log output on test fail\n- Integration with Cypress' Dashboard Service for project recording\n- Docker to self contain the application and require no pre-requisites on the host machine, bar Docker.\n\n## Installation\n\n- Clone the project\n\n### Local Installation\n\n- Run `cd e2e \u0026\u0026 npm install` to install cypress in the e2e folder\n- We can slot this into any project easily and isolate its dependencies from your project\n- View the `Makefile` for available commands\n\n### Docker Installation\n\n- Run `make docker-build` in the project \n- View the `Makefile` for available docker commands\n\n## Configuration\n\nThe main cypress configuration file, is in the e2e folder\n\n- `cypress.json`\n\nIt can contain configuration options applicable to all environments\n\nEnvironment specific config files are stored in `e2e/config/\u003cenvironment.json\u003e`\n\nThese will override any configurations specific environment vars set in `cypress.json`\n\nthese can be set on the command line by\n\n- `--env configFile=\u003cenvironment.json\u003e`\n\nCurrently supported environments are\n\n- development\n- production\n- staging\n- qa\n\nIf no option is provided is will default to the baseUrl defined in `e2e/config.json`\n\nIn order to setup development, you will need a website locally running and your URI_ROOT should be set.\n\n`export URI_ROOT=\u003cyour_root_url\u003e`\n\nIf you are using docker then please set your URI_ROOT in your docker-compose file, it is set in this example\n\n```yaml\n        environment:\n            - URI_ROOT=http://the-internet.herokuapp.com\n```\n\nIf it's URI_ROOT is not, and you select `--env configFile=development` the application will error, and ask you to set it.\n\n## Running tests in Docker via Make\n\n- `make docker-build` - Build the image\n- `make docker-test-local` - Run the tests\n- `make docker-bash` - Access the bash shell in the container\n\nFor more, see the Makefile\n\n## Running tests locally via Make\n\n- `make test-local`\n- `make test-qa`\n- `make test-staging`\n- `make test-production`\n\n## Direct from the command line\n\n- `npm run cypress:open` - runs test via gui\n- `npm run cypress:run`  - run tests via command line\n- `--env configFile=\u003cenv\u003e` - select an environment specific config\n- `-s '\u003cpathToFile\u003e'` path for the spec files you wish to run \n  - `-s 'cypress/integration/commands.spec.js'` example\n\n### GUI - Any changes made to test files are automatically picked up by the GUI and executed, post file save\n\n- `make test-local-gui` Opens the GUI with the development configuration selection\n- `make test-qa-gui`    Opens the GUI with the qa configuration selection\n\nThe GUI can be opened by `npx cypress open` but requires a `--env configFile=\u003cenv\u003e` option in order to set the correct BaseURL\n\n### Reporting\n\n- Videos of each run are stored in `e2e/cypress/videos`\n- Screenshots of failing tests are stored in `e2e/cypress/screenshots`\n- HTML Reports of test runs are generated with MochaAwesome are stored in `e2e/cypress/reports`\n- One report is generated per spec file\n- A report bundler is provided which will process each report in `e2e/cypress/reports` and combine them into a single HTML document with a random uuid title in `e2e/mochareports`\n- The report bundler can be run with `make combine-reports \u0026\u0026 make generate-report`\n\n```\ncombine-reports:\n\tnpx mochawesome-merge cypress/reports/mocha/*.json \u003e mochareports/report-$$(date +'%Y%m%d-%H%M%S').json\n\ngenerate-report:\n\tnpx marge mochareports/*.json -f report-$$(date +'%Y%m%d-%H%M%S') -o mochareports\n```\n- It can be published to an AWS S3 bucket with `make publish-reports-s3`\n- To publish to a bucket, set the following env vars\n\n```sh\n export BUCKET_NAME=\u003cYOUR_BUCKET_NAME\u003e\n export AWS_ACCESS_ID=\u003cYOUR_AWS_ACCESS_ID\u003e\n export AWS_SECRET_KEY=\u003cYOUR_AWS_SECRET_KEY\u003e\n```\n\n## Typescript\n\n- Spec (test) files are written as `example.spec.ts` and contained in `e2e/cypress/integration`\n- There is a `tsconfig.json` file in the `e2e` folder\n  - It includes the paths for the `.ts` files. If you add other paths for yours, include them here.\n  - It contains the typescript options and includes the Cypress typings for code completion.\n  - use visual studio code (if you aren't already) - it's free and comes feature packed.\n- There is a `tslint.json` file in the `e2e` folder\n  - Contains some rules for code linting\n- Tests are compiled with webpack typescript pre-processor.\n  - The config file is in `e2e/webpack.config.js`\n  - It is loaded in `e2e/cypress/plugins/index.js`, hooking into cypress's `on` event.\n\n## CircleCI\n\nThis project is building in CircleCI and can be viewed at the following link\n\nhttps://circleci.com/gh/YOU54F/cypress-docker-typescript\n\nSee the `.circleci` folder\n\n- `config.yml` - Contains the CircleCI build configuration\n\n### Slack Reporting\n\nA JS file has been written in order to publish results\n\n- `e2e/scripts/slack/slack-alert.js`\n\nIt provides the following distinct message types\n\n- Build Failure / Cypress error\n- Test Failure\n- Test Success\n\nIt provides the following information\n\n- CircleCI Build Status\n- Test Stats (Total Tests / Passes / Failures)\n- Author with link to Github commit\n- Branch name\n- Pull Request number and link to PR (only if PR)\n\nAnd the following build/test artefacts\n\n- CircleCI Build Log button\n- HTML Test report button (only on build success)\n- Videos of test runs (one link per test)\n- Screenshots of failed tests (one link per failing test)\n\nYou will need to set up a couple of things in order to use this.\n\nFirst build a Slack app \u0026 create an incoming webhook\n\n- https://api.slack.com/slack-apps\n\nSet the following environment variables in your localhost or CI configuration\n\n- `$SLACK_WEBHOOK_URL` - The full URL you created in the last step\n- `$SLACK_API_CHANNEL` - The channel ref you wish to publish to (right-click on your channel and click copy link, check the link, its the digits after the last / )\n\n### Cypress Dashboard Recording\n\nCircleCI builds pass in a `CYPRESS_RECORD_KEY` in order to publish the results to the Cypress Dashboard.\n\nWe run `make test-record` to set the `--record` flag and publish the results to the dashboard.\n\n## Scripted Runner\n\nAn example script is [here](./cli/spec.ts) as `cli/spec/ts`\n\nA example of how you can use this script in your project to:-\n\n- Run Cypress with Mochawesome \u0026 junit reporters\n- Merge mochawesome reports with `mochawesome-merge`\n- Construct a slack alert with the merged report, screenshots and videos\n\n```bash\nrm -rf ./cypress/reports/mocha \u0026\u0026 npx ts-node script.ts\n```\n\n```ts\n// tslint:disable-next-line: no-reference\n/// \u003creference path='./node_modules/cypress/types/cypress-npm-api.d.ts'/\u003e\nimport * as CypressNpmApi from \"cypress\";\nimport {slackRunner}from \"cypress-slack-reporter/bin/slack-alert\";\n// tslint:disable: no-var-requires\nconst marge = require(\"mochawesome-report-generator\");\nconst { merge } = require(\"mochawesome-merge\");\n// tslint:disable: no-var-requires\n\nCypressNpmApi.run({\n  reporter: \"cypress-multi-reporters\",\n  reporterOptions: {\n    reporterEnabled: \"mocha-junit-reporters, mochawesome\",\n    mochaJunitReportersReporterOptions: {\n      mochaFile: \"cypress/reports/junit/test_results[hash].xml\",\n      toConsole: false\n    },\n    mochawesomeReporterOptions: {\n      reportDir: \"cypress/reports/mocha\",\n      quiet: true,\n      overwrite: true,\n      html: false,\n      json: true\n    }\n  }\n})\n  .then(async results =\u003e {\n    const generatedReport =  await Promise.resolve(generateReport({\n      reportDir: \"cypress/reports/mocha\",\n      inline: true,\n      saveJson: true,\n    }))\n    // tslint:disable-next-line: no-console\n    console.log(\"Merged report available here:-\",generatedReport);\n    return generatedReport\n  })\n  .then(generatedReport =\u003e {\n    const base = process.env.PWD || \".\";\n    const program: any = {\n      ciProvider: \"circleci\",\n      videoDir: `${base}/cypress/videos`,\n      vcsProvider: \"github\",\n      screenshotDir: `${base}/cypress/screenshots`,\n      verbose: true,\n      reportDir: `${base}/cypress/reports/mocha`\n    };\n    const ciProvider: string = program.ciProvider;\n    const vcsProvider: string = program.vcsProvider;\n    const reportDirectory: string = program.reportDir;\n    const videoDirectory: string = program.videoDir;\n    const screenshotDirectory: string = program.screenshotDir;\n    const verbose: boolean = program.verbose;\n    // tslint:disable-next-line: no-console\n    console.log(\"Constructing Slack message with the following options\", {\n      ciProvider,\n      vcsProvider,\n      reportDirectory,\n      videoDirectory,\n      screenshotDirectory,\n      verbose\n    });\n    const slack = slackRunner(\n      ciProvider,\n      vcsProvider,\n      reportDirectory,\n      videoDirectory,\n      screenshotDirectory,\n      verbose\n    );\n     // tslint:disable-next-line: no-console\n     console.log(\"Finished slack upload\")\n\n  })\n  .catch((err: any) =\u003e {\n    // tslint:disable-next-line: no-console\n    console.log(err);\n  });\n\nfunction generateReport(options: any) {\n  return merge(options).then((report: any) =\u003e\n    marge.create(report, options)\n  );\n}\n```\n\n## TODO\n\n- Applitools Integration\n- Convert the slack-alert bash file into to a .ts file (Github thinks this is a shell project - waaaaah) - and add some tests!\n- publish to s3 bucket needs error handling, should exit each function gracefully if the directories are empty\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyou54f%2Ftemplate-cypress-docker-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyou54f%2Ftemplate-cypress-docker-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyou54f%2Ftemplate-cypress-docker-typescript/lists"}