You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Normally, all of your test code, your application, and Cypress commands are executed in the browser. But Cypress also runs a Node.js process outside the browser that you can utilize. We call this the **background process**.
5
+
Normally your application and all of your test codeare executed in the browser. But you can utilize a Node.js process that Cypress runs outside the browser. We call this the **background process**.
7
6
8
-
The **background file** enables you to run code in the **background process** to hook into, modify, or extend the internal behavior of Cypress via Node.js.
7
+
You can run code in the **background process**in order to hook into, modify, or extend the behavior of Cypress via the **background file**.
9
8
10
9
**Background events** are a "seam" for you to write your own custom code that executes during particular stages of the Cypress lifecycle. {% url "Check out the various events here" catalog-of-events %}.
11
10
12
11
# Use Cases
13
12
14
13
## Configuration
15
14
16
-
You can programmatically alter the resolved configuration and environment variables that come from `cypress.json`, {% url `cypress.env.json` environment-variables#Option-2-cypress-env-json %}, the CLI, or system environment variables.
15
+
You can programmatically alter the resolved configuration and environment variables that come from your `cypress.json` file, your {% url `cypress.env.json` environment-variables#Option-2-cypress-env-json %} file, the CLI, or system environment variables.
17
16
18
-
This enables you to do things like:
17
+
### This enables you to do things like:
19
18
20
-
-Use multiple environments with their own configurations
21
-
- Swap out environment variables based on an environment
22
-
- Read in configuration files using the built in `fs`lib
23
-
- Write your configuration in `yml`
19
+
-Set up different configurations for multiple environments.
20
+
- Swap out environment variables based on an environment.
21
+
- Read in configuration files using the built in `fs`library.
22
+
- Write your configuration in `yml`.
24
23
25
-
Check out our {% url '`configuration` docs' configuration-event %} which describe how to use this event.
24
+
Check out our {% url 'configuration docs' configuration-event %} which describe how to use this event.
26
25
27
26
## Preprocessors
28
27
29
-
The event `file:preprocessor` is used to customize how your test code is transpiled and sent to the browser. By default Cypress handles CoffeeScript and ES6 using `babel` and then uses `browserify` to package it for the browser.
28
+
The {% url '`file:preprocessor`' file-preprocessor-event %} event is used to customize how your test code is transpiled and sent to the browser. By default Cypress handles CoffeeScript and ES6 using `babel` and then uses `browserify` to package it for the browser.
30
29
31
-
You can use the `file:preprocessor` event to do things like:
30
+
### You can use the `file:preprocessor` event to do things like:
32
31
33
32
- Add TypeScript support.
34
33
- Add the latest ES* support.
35
34
- Write your test code in ClojureScript.
36
35
- Customize the `babel` settings to add your own plugins.
37
36
- Swap out `browserify` for `webpack` or anything else.
38
37
39
-
Check out the {% url '`file:preprocessor` event docs' file-preprocessor-event %} which describe how to use this event.
38
+
Check out the {% url '`file:preprocessor` event' file-preprocessor-event %} which describe how to use this event.
40
39
41
40
## Browser Launching
42
41
43
-
The event `before:browser:launch` can be used to modify the launch arguments for each particular browser.
42
+
The {% url "`before:browser:launch`" before-browser-launch-event %} event can be used to modify the launch arguments for each particular browser.
44
43
45
-
You can use the `before:browser:launch` event to do things like:
44
+
### You can use the `before:browser:launch` event to do things like:
46
45
47
-
- Load a Chrome extension
48
-
-Change print media
49
-
- Enable or disable experimental chrome features
50
-
- Control which Chrome components are loaded
46
+
- Load a Chrome extension.
47
+
-Specify the media type
48
+
- Enable or disable experimental chrome features.
49
+
- Control which Chrome components are loaded.
51
50
52
-
Check out the {% url '`before:browser:launch` event docs' before-browser-launch-event %} which describe how to use this event.
51
+
Check out the {% url '`before:browser:launch` event' before-browser-launch-event %} which describe how to use this event.
53
52
54
53
## Screenshot handling
55
54
56
-
The event `after:screenshot` is called after a screenshot is taken and saved to disk.
55
+
The {% url '`after:screenshot`' after-screenshot-event %} event is called after a screenshot is taken and saved to disk.
57
56
58
-
You can use the `after:screenshot` event to do things like:
57
+
### You can use the `after:screenshot` event to do things like:
59
58
60
-
- Save details about the screenshot
61
-
- Rename the screenshot
62
-
- Manipulate the screenshot image by resizing or cropping it
59
+
- Save details about the screenshot.
60
+
- Rename the screenshot.
61
+
- Manipulate the screenshot image by resizing or cropping it.
63
62
64
63
Check out the {% url '`after:screenshot` event docs' after-screenshot-event %} which describe how to use this event.
65
64
66
65
## cy.task
67
66
68
-
The event `task` is used in conjunction with the {% url `cy.task()` task %} command. It allows you to write arbitrary code in Node.js to accomplish tasks that aren't possible in the browser.
67
+
The {% url '`task`' task-event %} event is used in conjunction with the {% url `cy.task()` task %} command. It allows you to write arbitrary code in Node.js to accomplish tasks that aren't possible in the browser.
69
68
70
-
You can use the `task` event to do things like:
69
+
### You can use the `task` event to do things like:
71
70
72
-
- Manipulating a database (seeding, reading, writing, etc.)
73
-
- Storing state in Node that you want persisted (since the driver is fully refreshed on visits)
74
-
- Performing parallel tasks (like making multiple http requests outside of Cypress)
75
-
- Running an external process (like spinning up a Webdriver instance of another browser like Firefox, Safari, or puppeteer)
71
+
- Manipulating a database (seeding, reading, writing, etc.).
72
+
- Storing state in Node.js that you want persisted (since the driver is fully refreshed on visits).
73
+
- Performing parallel tasks (like making multiple http requests outside of Cypress).
74
+
- Running an external process (like spinning up a Webdriver instance of another browser like Firefox, Safari, or puppeteer).
76
75
77
76
Check out the {% url '`task` event docs' task-event %} which describe how to use this event.
78
77
79
78
# API
80
79
81
-
Whether you install an NPM module, or just want to write your own code - you should do all of that in this file:
80
+
Whether you install an NPM module, or just want to write your own code - you should do all of that in the **background file** located at:
82
81
83
82
```text
84
83
cypress/background/index.js
@@ -88,9 +87,9 @@ cypress/background/index.js
88
87
By default Cypress seeds this file for new projects, but if you have an existing project, just create this file yourself.
89
88
{% endnote %}
90
89
91
-
Inside of this file, you will export a function. Cypress will call this function, pass you the project's configuration, and enable you to bind to the events exposed.
90
+
Inside of this file, a function should be exported. Cypress will call this function, pass you the project's configuration, and enable you to bind to the exposed events.
The exported function is called whenever a project is opened either with {% url "`cypress open`" command-line#cypress-open %} or {% url "`cypress run`" command-line#cypress-run %}.
105
+
The exported function is called whenever a project is opened using {% url "`cypress open`" command-line#cypress-open %} or {% url "`cypress run`" command-line#cypress-run %}.
107
106
108
107
Your function will receive 2 arguments: `on` and `config`.
109
108
110
-
You can return a synchronous function, or you can also return a Promise, and it will be awaited until it resolves. This enables you to perform asynchronous actions in your exported function such as reading files in from the filesystem.
109
+
You can return a synchronous function or you can return a Promise that will be awaited until it resolves. This enables you to perform asynchronous actions in your exported function such as reading files in from the filesystem.
111
110
112
-
If you return or resolve with an object, Cypress will then merge this object into the `config` which enables you to overwrite configuration or environment variables.
111
+
If you return or resolve with an object, Cypress will merge this object into the `config`. This enables you to overwrite configuration or environment variables.
113
112
114
113
## on
115
114
@@ -129,45 +128,43 @@ Each event documents its own argument signature. To understand how to use them,
129
128
130
129
## config
131
130
132
-
`config` is the resolved {% url "Cypress configuration" configuration %} of the opened project.
131
+
`config` is the resolved {% url "Cypress configuration" configuration %} of the running project.
133
132
134
133
This configuration contains all of the values that get passed into the browser for your project.
135
134
136
135
{% url 'For a comprehensive list of all configuration values look here.' https://github.com/cypress-io/cypress/blob/master/packages/server/lib/config.coffee %}
137
136
138
-
Some plugins may utilize or require these values, so they can take certain actions based on the configuration.
139
-
140
-
You can programmatically modify these values and Cypress will then respect these changes. This enables you to swap out configuration based on things like the environment you're running in.
137
+
You can programmatically modify these values and Cypress will then respect the changes. This enables you to swap out configuration based on things like the environment you're running in.
141
138
142
139
{% url "Please check out our API docs for modifying configuration here." configuration-event %}
143
140
144
141
# Execution context
145
142
146
143
Your `backgroundFile` is invoked when Cypress opens a project.
147
144
148
-
Cypress does this by spawning an independent `child_process` which then `requires` in your `backgroundFile`. This is similar to the way Visual Studio Code or Atom works.
145
+
Cypress does this by spawning an independent `child_process` which then `requires` in your `backgroundFile`. This is similar to the way Visual Studio Code or Atom work.
149
146
150
-
You will need to keep in mind it is **Cypress who is requiring your file** - not your local project, not your local Node version, and not anything else under your control.
147
+
You will need to keep in mind that **Cypress is requiring your file** - not your local project, not your local Node version, and not anything else under your control.
151
148
152
-
Because of this, this global context and the version of Node is controlled by Cypress.
149
+
Because of this, global context and the Node version is controlled by Cypress.
153
150
154
151
{% note warning "Node version" %}
155
152
156
-
Keep in mind - code executed in plugins is executed **by the Node version** that comes bundled in Cypress itself.
153
+
Code executed in the background file is executed **by the Node version** that comes bundled with Cypress.
157
154
158
-
This version of Node has **no relation** to locally installed versions. Therefore you have to write Node code which is compatible with this version.
155
+
This Node version has **no relation** to locally installed versions. Therefore you have to write Node code which is compatible with this version.
159
156
160
-
You can find the current Node version we use {% url 'here' https://github.com/cypress-io/cypress/blob/master/.node-version %}.
157
+
You can find the current Node version in Cypress {% url 'here' https://github.com/cypress-io/cypress/blob/master/.node-version %}.
161
158
162
159
{% endnote %}
163
160
164
161
## NPM modules
165
162
166
-
When Cypress executes your `backgroundFile` it will execute with `process.cwd()` set to your project's path. Additionally - you will be able to `require`**any Node module** you have installed.
163
+
When Cypress executes your `backgroundFile` it will execute with `process.cwd()` set to your {% url "root project's path" configuration#Folders-Files %}. Additionally - you will be able to `require`**any Node module** you have installed.
167
164
168
165
You can also `require` local files relative to your project.
169
166
170
-
**For example, if your `package.json`looked like this:**
167
+
### For example, if your `package.json`looks like this:
171
168
172
169
```js
173
170
{
@@ -181,33 +178,33 @@ You can also `require` local files relative to your project.
181
178
}
182
179
```
183
180
184
-
**Then you could do any of the following in your `backgroundFile`:**
181
+
### Then you could do any of the following in your `backgroundFile`:
185
182
186
183
```js
187
184
// cypress/plugins/index.js
188
185
189
-
constpath=require('path') // native node packages
190
-
constdebug=require('debug') // dependencies
191
-
const_=require('lodash') // dev dependencies
186
+
constpath=require('path') // native node packages
187
+
constdebug=require('debug') // dependencies
188
+
const_=require('lodash') // dev dependencies
192
189
constUser=require('../../lib/models/user') // relative local modules
Cypress spawns your `backgroundFile` in its own child process so it is isolated away from the context that Cypress itself runs in. That means you cannot accidentally modify or change Cypress' own execution in any way.
198
+
Cypress spawns your `backgroundFile` in its own child process so it is isolated away from the context that Cypress itself runs in. That means you cannot accidentally modify or change Cypress's own execution in any way.
202
199
203
-
If your `backgroundFile` has an uncaught exception, an unhandled rejection from a promise, a syntax error, or anything else - we will automatically catch those and display them to you inside of the console and even in the Test Runner itself.
200
+
If your `backgroundFile` has an uncaught exception, an unhandled rejection from a promise, a syntax error, or any other error - we will automatically catch those and display them to you inside of the console and even in the Test Runner itself.
204
201
205
-
Errors from your plugins*will not crash* Cypress.
202
+
Errors from your `backgroundFile`*will not crash* Cypress.
206
203
207
204
# File changes
208
205
209
206
Normally when writing code in Node, you typically have to restart the process after changing any files.
210
207
211
-
With Cypress, we automatically watch your `backgroundFile`and any changes made will take effect immediately. We will read the file in and execute the exported function again.
208
+
With Cypress, we automatically watch your `backgroundFile`so that any changes made will take effect immediately. We will read the file in and execute the exported function again.
212
209
213
-
This enables you to iterate on plugin code even with Cypress already running.
210
+
This enables you to iterate on plugin code even while Cypress is running.
0 commit comments