diff --git a/_config.yml b/_config.yml index 1ff11c029b..e26e470390 100644 --- a/_config.yml +++ b/_config.yml @@ -149,6 +149,9 @@ alias: # for chinese translation zh-cn/: zh-cn/guides/overview/why-cypress.html + # obsolete content + dashboard/overview/runs-dashboard.html: guides/dashboard/runs.html + # Include/Exclude Files/Folders include: diff --git a/source/api/commands/screenshot.md b/source/api/commands/screenshot.md index fb85a7325c..0d5730e108 100644 --- a/source/api/commands/screenshot.md +++ b/source/api/commands/screenshot.md @@ -46,6 +46,7 @@ Option |Default | Description `capture` | `'fullPage'` | Which parts of the Test Runner to capture. This value is ignored for element screenshot captures. Valid values are `viewport`, `fullPage`, or `runner`. When `viewport`, the application under test is captured in the current viewport. When `fullPage`, the application under test is captured in its entirety from top to bottom. When `runner`, the entire browser viewport, including the Cypress Command Log, is captured. For screenshots automatically taken on test failure, capture is always coerced to `runner`. `clip` | `null` | Position and dimensions (in pixels) used to crop the final screenshot image. Should have the following shape: `{ x: 0, y: 0, width: 100, height: 100 }` `disableTimersAndAnimations` | `true`| When true, prevents JavaScript timers (`setTimeout`, `setInterval`, etc) and CSS animations from running while the screenshot is taken. +`padding` | `null` | Padding used to alter the dimensions of a screenshot of an element. It can either be a number, or an array of up to four numbers [using CSS shorthand notation](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties). This property is only applied for element screenshots and is ignored for all other types. `scale` | `false` | Whether to scale the app to fit into the browser viewport. This is always coerced to `true` when `capture` is `runner`. `timeout` | {% url `responseTimeout` configuration#Timeouts %} | {% usage_options timeout .screenshot %} `onBeforeScreenshot` | `null` | A callback before a non-failure screenshot is taken. When capturing screenshots of an element, the argument is the element being captured. For other screenshots, the argument is the `document`. @@ -113,6 +114,12 @@ cy.screenshot({ x: 20, y: 20, width: 400, height: 300 }) cy.get('.post').first().screenshot() ``` +### Take a screenshot of the first `.post` element with 10px of padding around it + +```javascript +cy.get('.post').first().screenshot({ padding: 10 }) +``` + ### Chain off the screenshot to click the element captured ```javascript diff --git a/source/guides/dashboard/organizations.md b/source/guides/dashboard/organizations.md index 7beb93bbd5..d026344af6 100644 --- a/source/guides/dashboard/organizations.md +++ b/source/guides/dashboard/organizations.md @@ -25,7 +25,7 @@ You can create an organization from within the {% url "Dashboard Service" https: ## Personal Orgs -By default, every user of Cypress is given a personal organization - named after you. You cannot delete or edit the name of this default organization. +By default, every user of Cypress is given a personal organization - named after you. You cannot delete or edit the name of this personal organization. ## Delete Org diff --git a/source/guides/dashboard/users.md b/source/guides/dashboard/users.md index be1eadefaf..bca58b0b14 100644 --- a/source/guides/dashboard/users.md +++ b/source/guides/dashboard/users.md @@ -30,7 +30,7 @@ The permissions for each user role for the Dashboard Service. | Permission | | | | | ---------------------------------------------------|--------|-------|------| | See test recordings of private projects | ✅ **Member** | ✅ **Admin** | ✅ **Owner** | -| See record keys of projects | ✅ **Member** | ✅ **Admin** | ✅ **Owner** | +| See record keys of projects | ✅ **Member** | ✅ **Admin** | ✅ **Owner** | | See billing and usage information | | ✅ **Admin** | ✅ **Owner** | | Edit billing information | | ✅ **Admin** | ✅ **Owner** | | See users invited to organization | | ✅ **Admin** | ✅ **Owner** | @@ -49,7 +49,7 @@ The permissions for each user role for the Dashboard Service. | Invite 'owner' to organization | | | ✅ **Owner** | | Edit 'owner' in organization | | | ✅ **Owner** | | Remove 'owner' from organization | | | ✅ **Owner** | -| Add, edit, remove user in default organization | | | ✅ **Owner** | +| Add, edit, remove user in personal organization | | | ✅ **Owner** | | Edit organization name | | | ✅ **Owner** | | Delete organization | | | ✅ **Owner** | | Transfer project to another organization | | | ✅ **Owner** | diff --git a/source/guides/guides/command-line.md b/source/guides/guides/command-line.md index 0ecbfa0fdc..8083f0c817 100644 --- a/source/guides/guides/command-line.md +++ b/source/guides/guides/command-line.md @@ -79,7 +79,7 @@ cypress run [options] Option | Description ------ | --------- -`--browser`, `-b` | {% urlHash "Specify a different browser to run tests in" cypress-run-browser-lt-browser-name-or-path-gt %} +`--browser`, `-b` | {% urlHash "Run Cypress in the browser with the given name. If a filesystem path is supplied, Cypress will attempt to use the browser at that path." cypress-run-browser-lt-browser-name-or-path-gt %} `--ci-build-id` | {% urlHash "Specify a unique identifier for a run to enable grouping or parallelization." cypress-run-ci-build-id-lt-id-gt %} `--config`, `-c` | {% urlHash "Specify configuration" cypress-run-config-lt-config-gt %} `--env`, `-e` | {% urlHash "Specify environment variables" cypress-run-env-lt-env-gt %} @@ -102,7 +102,7 @@ Option | Description cypress run --browser chrome ``` -The "browser" argument can be set to "chrome", "canary", "chromium", or "electron" to launch a browser detected on your system. Cypress will attempt to automatically find the installed browser for you. +The "browser" argument can be set to "chrome", "canary", "chromium", or "electron" to launch a browser detected on your system. Cypress will attempt to automatically find the installed browser for you. You can also choose a browser by supplying a path: @@ -302,7 +302,7 @@ Options passed to `cypress open` will automatically be applied to the project yo Option | Description ------ | --------- -`--browser`, `-b` | {% urlHash "Specify a different browser to run tests in" cypress-open-browser-lt-browser-path-gt %} +`--browser`, `-b` | {% urlHash "Path to a custom browser to be added to the list of available browsers in Cypress" cypress-open-browser-lt-browser-path-gt %} `--config`, `-c` | {% urlHash "Specify configuration" cypress-open-config-lt-config-gt %} `--detached`, `-d` | Open Cypress in detached mode `--env`, `-e` | {% urlHash "Specify environment variables" cypress-open-env-lt-env-gt %} @@ -321,6 +321,8 @@ The "browser" option allows you to specify the path to a custom browser to use w cypress open --browser /usr/bin/chromium ``` +If found, the specified browser will be added to the list of available browsers in the Cypress Test Runner. + Currently, only browsers in the Chrome family are supported. {% url "Having trouble launching a browser? Check out the debugging guide" debugging#Launching-browsers %} diff --git a/source/guides/guides/continuous-integration.md b/source/guides/guides/continuous-integration.md index 69a3eb3cc1..dcc3908099 100644 --- a/source/guides/guides/continuous-integration.md +++ b/source/guides/guides/continuous-integration.md @@ -164,6 +164,7 @@ Cypress should run on **all** CI providers. We have provided some example projec CI Provider | Example Project | Example Config ----------- | --------------- | -------------- +{% url "AWS Amplify Console" https://aws.amazon.com/amplify/console %} | {% url "cypress-example-kitchensink" https://github.com/cypress-io/cypress-example-kitchensink %} | {% url "amplify.yml" https://github.com/cypress-io/cypress-example-kitchensink/blob/master/amplify.yml %} {% url "AppVeyor" https://appveyor.com %} | {% url "cypress-example-kitchensink" https://github.com/cypress-io/cypress-example-kitchensink %} | {% url "appveyor.yml" https://github.com/cypress-io/cypress-example-kitchensink/blob/master/appveyor.yml %} {% url "Azure DevOps / VSTS CI / TeamFoundation" https://dev.azure.com/ %} | {% url "cypress-example-kitchensink" https://github.com/bahmutov/cypress-example-kitchensink %} | {% url "vsts-ci.yml" https://github.com/bahmutov/cypress-example-kitchensink/blob/master/vsts-ci.yml %} {% url "BitBucket" https://bitbucket.org/product/features/pipelines %} | {% url "cypress-example-kitchensink" https://bitbucket.org/cypress-io/cypress-example-kitchensink %} | {% url "bitbucket-pipelines.yml" https://bitbucket.org/cypress-io/cypress-example-kitchensink/src/master/bitbucket-pipelines.yml %} @@ -323,6 +324,90 @@ jobs: Find the complete CircleCI v2 example with caching and artifact upload in the {% url "cypress-example-docker-circle" https://github.com/cypress-io/cypress-example-docker-circle %} repo. +### Example `amplify.yml` + +```yaml +version: 0.1 +frontend: + phases: + preBuild: + commands: + - npm install + build: + commands: + - npm run build + artifacts: + baseDirectory: app + files: + - "**/*" + cache: + paths: + - node_modules/**/* +test: + artifacts: + baseDirectory: cypress + configFilePath: "**/mochawesome.json" + files: + - "**/*.png" + - "**/*.mp4" + phases: + preTest: + commands: + - npm install + - npm install wait-on + - npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator + - "npm start & npx wait-on http://127.0.0.1:8080" + test: + commands: + - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"' + postTest: + commands: + - npx mochawesome-merge --reportDir cypress/report/mochawesome-report > cypress/report/mochawesome.json +``` + +### Example `amplify.yml` v2 with --record for Cypress Dashboard + +Add `CYPRESS_RECORD_KEY` Enviroment Variable in [Amplify Console](https://aws.amazon.com/amplify/console/). + +```yaml +version: 0.1 +frontend: + phases: + preBuild: + commands: + - npm install + build: + commands: + - npm run build + artifacts: + baseDirectory: app + files: + - "**/*" + cache: + paths: + - node_modules/**/* +test: + artifacts: + baseDirectory: cypress + configFilePath: "**/mochawesome.json" + files: + - "**/*.png" + - "**/*.mp4" + phases: + preTest: + commands: + - npm install + - npm install wait-on + - npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator + - "npm start & npx wait-on http://127.0.0.1:8080" + test: + commands: + - 'npx cypress run --record --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"' + postTest: + commands: + - npx mochawesome-merge --reportDir cypress/report/mochawesome-report > cypress/report/mochawesome.json +``` + ## Docker We have {% url 'created' https://github.com/cypress-io/cypress-docker-images %} an official {% url 'cypress/base' 'https://hub.docker.com/r/cypress/base/' %} container with all of the required dependencies installed. Just add Cypress and go! We are also adding images with browsers pre-installed under {% url 'cypress/browsers' 'https://hub.docker.com/r/cypress/browsers/' %} name. A typical Dockerfile would look like this: diff --git a/source/guides/tooling/typescript-support.md b/source/guides/tooling/typescript-support.md index 152ed26ba4..2caaaff385 100644 --- a/source/guides/tooling/typescript-support.md +++ b/source/guides/tooling/typescript-support.md @@ -43,6 +43,16 @@ The `"types"` will tell the TypeScript compiler to only include type definitions You can find an example of Jest and Cypress installed in the same project using a separate `tsconfig.json` file in the {% url cypress-io/cypress-and-jest-typescript-example https://github.com/cypress-io/cypress-and-jest-typescript-example %} repo. {% endnote %} +{% note warning %} +You may have to restart your IDE's TypeScript server if the setup above does not appear to work. For example: + +VS Code (within a .ts or .js file): +* Open the command palette (Mac: `cmd+shift+p`, Windows: `ctrl+shift+p`) +* Type "restart ts" and select the "TypeScript: Restart TS server." option + +If that does not work, try restarting the IDE. +{% endnote %} + ## Types for custom commands When adding {% url "custom commands" custom-commands %} to the `cy` object, you can manually add their types to avoid TypeScript errors.