https://github.com/filiphric/cypress-plugin-api
Cypress plugin to show your API information in the Cypress UI runner
https://github.com/filiphric/cypress-plugin-api
api cypress cypress-io testing
Last synced: 4 months ago
JSON representation
Cypress plugin to show your API information in the Cypress UI runner
- Host: GitHub
- URL: https://github.com/filiphric/cypress-plugin-api
- Owner: filiphric
- License: isc
- Created: 2022-10-07T19:05:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T08:30:09.000Z (over 1 year ago)
- Last Synced: 2025-09-12T02:57:05.688Z (5 months ago)
- Topics: api, cypress, cypress-io, testing
- Language: TypeScript
- Homepage:
- Size: 2.27 MB
- Stars: 272
- Watchers: 6
- Forks: 36
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Cypress plugin API
Cypress plugin for effective API testing. Imagine Postman, but in Cypress. Prints out information about the API call in the Cypress App UI.
### Features
- cy.api() command, that will information about the API call, such as URL, headers, response and more to the UI frame
- all of the info can be viewed in a time-travel snapshots
- simple table for viewing cookies
- JSON data object and array folding
- color coding of methods in UI view and in timeline
- calculating size of the response
- [combine API calls with UI](#snapshot-only-mode)
- [hide sensitive headers and auth information](#hiding-credentials)
- [`requestMode` to add cy.api() features to cy.request() command](#requestmode---enable-ui-for-cyrequest-command)
- [TypeScript support](#typescript-support)
### Installation
Install this package:
```bash
npm i cypress-plugin-api
# or
yarn add cypress-plugin-api
```
Import the plugin into your `cypress/support/e2e.js` file:
```js
import 'cypress-plugin-api'
// or
require('cypress-plugin-api')
```
### Usage
You 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.
#### Snapshot only mode
If 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.
`snapshotOnly` mode is set to `false` by default. To set up `snapshotOnly` mode, add following to your test configuration:
```js
it('my UI & API test', { env: { snapshotOnly: true } }, () => {
cy.visit('/') // open app
cy.api('/item') // call api
cy.get('#myElement') // still able to access element on page
})
```
or you can add the configuration to your `cypress.config.{js,ts}` file:
```js
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
},
env: {
snapshotOnly: true
}
},
})
```
#### Hiding credentials
You 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.
```js
it('my secret test', { env: { hideCredentials: true } }, () => {
cy.api({
url: '/',
headers: {
authorization: Cypress.env('myToken')
}
})
})
```
The result will look like this:
You can also hide any credentials you want by defining array of keys in `hideCredentialsOptions`,
```js
it('my secret test', {
env: {
hideCredentials: true,
hideCredentialsOptions: {
headers: ['authorization'],
auth: ['pass'],
body: ['username'],
query: ['password']
}
}
}, () => {
cy.api({
url: '/',
headers: {
authorization: Cypress.env('myToken') // hidden
},
auth: {
pass: Cypress.env('myPass') // hidden
},
body: {
username: Cypress.env('myUser') // hidden
},
qs: {
password: Cypress.env('password') // hidden
}
})
})
```
This will override all the defaults set by `hideCredentials`.
#### `requestMode` - enable UI for `cy.request()` command
This 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.
#### TypeScript support
In most cases, types work just by installing plugin, but you can add the types to your `tsconfig.json`
```json
{
"types": ["cypress-plugin-api"]
}
```
This will add types for `cy.api()` command, it’s returned values as well as `env` properties.
### Issues
All 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.
...powered by coffee and love ❤️ Filip Hric