![](\"https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86\")
\n![](\"https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/count/v2x96h/main&style=flat&logo=cypress\"){kind=icon}
\n\n
\nCypress plugin for effective API testing. Imagine Postman, but in Cypress. Prints out information about the API call in the Cypress App UI.\n
\n\n\n\n### Features\n- cy.api() command, that will information about the API call, such as URL, headers, response and more to the UI frame\n- all of the info can be viewed in a time-travel snapshots\n- simple table for viewing cookies\n- JSON data object and array folding\n- color coding of methods in UI view and in timeline\n- calculating size of the response\n- [combine API calls with UI](#snapshot-only-mode)\n- [hide sensitive headers and auth information](#hiding-credentials)\n- [`requestMode` to add cy.api() features to cy.request() command](#requestmode---enable-ui-for-cyrequest-command)\n- [TypeScript support](#typescript-support)\n\n### Installation\n\nInstall this package:\n```bash\nnpm i cypress-plugin-api\n# or\nyarn add cypress-plugin-api\n```\n\nImport the plugin into your `cypress/support/e2e.js` file:\n```js\nimport 'cypress-plugin-api'\n// or\nrequire('cypress-plugin-api')\n```\n\n### Usage\nYou can now use `cy.api()` command. This command works exactly like `cy.request()` but in addition to calling your API, it will print our information about the API call in your Cypress runner.\n\n#### Snapshot only mode\nIf you want to combine your API calls with your UI test, you can now use `snapshotOnly` mode, that will hide the plugin UI view after command ends. You can access it within the timeline.\n\n`snapshotOnly` mode is set to `false` by default. To set up `snapshotOnly` mode, add following to your test configuration:\n\n```js\nit('my UI & API test', { env: { snapshotOnly: true } }, () => {\n\n cy.visit('/') // open app\n cy.api('/item') // call api\n cy.get('#myElement') // still able to access element on page\n\n})\n```\n\nor you can add the configuration to your `cypress.config.{js,ts}` file:\n```js\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents(on, config) {\n },\n env: {\n snapshotOnly: true\n }\n },\n})\n```\n\n#### Hiding credentials\nYou can hide your credentials by passing `hideCredentials` option to your env configuration. This will hide all the credentials from UI, but you can still access them via console. This option is set to `false` by default.\n\n```js\nit('my secret test', { env: { hideCredentials: true } }, () => {\n\n cy.api({\n url: '/',\n headers: {\n authorization: Cypress.env('myToken')\n }\n })\n\n})\n```\n\nThe result will look like this:\n\n\n\nYou can also hide any credentials you want by defining array of keys in `hideCredentialsOptions`,\n\n```js\nit('my secret test', { \n env: { \n hideCredentials: true, \n hideCredentialsOptions: {\n headers: ['authorization'],\n auth: ['pass'],\n body: ['username'],\n query: ['password']\n }\n }\n}, () => {\n\n cy.api({\n url: '/',\n headers: {\n authorization: Cypress.env('myToken') // hidden\n },\n auth: {\n pass: Cypress.env('myPass') // hidden\n },\n body: {\n username: Cypress.env('myUser') // hidden\n },\n qs: {\n password: Cypress.env('password') // hidden\n }\n })\n\n})\n```\n\nThis will override all the defaults set by `hideCredentials`.\n\n#### `requestMode` - enable UI for `cy.request()` command\nThis setting adds all the functionality of `cy.api()` command to `cy.request()`. It’s set to `false` by default. This means that when you call `cy.request()` in your test, it will show UI.\n\n#### TypeScript support\nIn most cases, types work just by installing plugin, but you can add the types to your `tsconfig.json`\n```json\n{\n \"types\": [\"cypress-plugin-api\"]\n}\n```\nThis will add types for `cy.api()` command, it’s returned values as well as `env` properties.\n\n### Issues\nAll the issues can be found on [issues page](https://github.com/filiphric/cypress-plugin-api/issues), feel free to open any new ones or contribute with your own code.\n\n### Testing Local Changes in Another Repository\nYou can use [yalc](https://github.com/wclr/yalc) to use your local changes as the package in another repository without needing to publish to NPM.\n\n\n...powered by coffee and love ❤️ Filip Hric\n
","readmeFilename":"README.md"}