Skip to content

Commit cf5a2fe

Browse files
Minor updates for Background Process page
- rearranging sentences to read better mostly
1 parent e1c8ed0 commit cf5a2fe

File tree

1 file changed

+56
-59
lines changed

1 file changed

+56
-59
lines changed
Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,83 @@
11
---
22
title: Background Process
3-
43
---
54

6-
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 code are executed in the browser. But you can utilize a Node.js process that Cypress runs outside the browser. We call this the **background process**.
76

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**.
98

109
**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 %}.
1110

1211
# Use Cases
1312

1413
## Configuration
1514

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.
1716

18-
This enables you to do things like:
17+
### This enables you to do things like:
1918

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`.
2423

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.
2625

2726
## Preprocessors
2827

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.
3029

31-
You can use the `file:preprocessor` event to do things like:
30+
### You can use the `file:preprocessor` event to do things like:
3231

3332
- Add TypeScript support.
3433
- Add the latest ES* support.
3534
- Write your test code in ClojureScript.
3635
- Customize the `babel` settings to add your own plugins.
3736
- Swap out `browserify` for `webpack` or anything else.
3837

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.
4039

4140
## Browser Launching
4241

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.
4443

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:
4645

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.
5150

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.
5352

5453
## Screenshot handling
5554

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.
5756

58-
You can use the `after:screenshot` event to do things like:
57+
### You can use the `after:screenshot` event to do things like:
5958

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.
6362

6463
Check out the {% url '`after:screenshot` event docs' after-screenshot-event %} which describe how to use this event.
6564

6665
## cy.task
6766

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.
6968

70-
You can use the `task` event to do things like:
69+
### You can use the `task` event to do things like:
7170

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).
7675

7776
Check out the {% url '`task` event docs' task-event %} which describe how to use this event.
7877

7978
# API
8079

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:
8281

8382
```text
8483
cypress/background/index.js
@@ -88,9 +87,9 @@ cypress/background/index.js
8887
By default Cypress seeds this file for new projects, but if you have an existing project, just create this file yourself.
8988
{% endnote %}
9089

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.
9291

93-
```javascript
92+
```js
9493
// cypress/background/index.js
9594

9695
// export a function
@@ -103,13 +102,13 @@ module.exports = (on, config) => {
103102
}
104103
```
105104

106-
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 %}.
107106

108107
Your function will receive 2 arguments: `on` and `config`.
109108

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.
111110

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.
113112

114113
## on
115114

@@ -129,45 +128,43 @@ Each event documents its own argument signature. To understand how to use them,
129128

130129
## config
131130

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.
133132

134133
This configuration contains all of the values that get passed into the browser for your project.
135134

136135
{% url 'For a comprehensive list of all configuration values look here.' https://github.com/cypress-io/cypress/blob/master/packages/server/lib/config.coffee %}
137136

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.
141138

142139
{% url "Please check out our API docs for modifying configuration here." configuration-event %}
143140

144141
# Execution context
145142

146143
Your `backgroundFile` is invoked when Cypress opens a project.
147144

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.
149146

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.
151148

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.
153150

154151
{% note warning "Node version" %}
155152

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.
157154

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.
159156

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 %}.
161158

162159
{% endnote %}
163160

164161
## NPM modules
165162

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.
167164

168165
You can also `require` local files relative to your project.
169166

170-
**For example, if your `package.json` looked like this:**
167+
### For example, if your `package.json` looks like this:
171168

172169
```js
173170
{
@@ -181,33 +178,33 @@ You can also `require` local files relative to your project.
181178
}
182179
```
183180

184-
**Then you could do any of the following in your `backgroundFile`:**
181+
### Then you could do any of the following in your `backgroundFile`:
185182

186183
```js
187184
// cypress/plugins/index.js
188185

189-
const path = require('path') // native node packages
190-
const debug = require('debug') // dependencies
191-
const _ = require('lodash') // dev dependencies
186+
const path = require('path') // native node packages
187+
const debug = require('debug') // dependencies
188+
const _ = require('lodash') // dev dependencies
192189
const User = require('../../lib/models/user') // relative local modules
193190

194-
console.log(__filename) // /Users/janelane/Dev/my-project/cypress/background/index.js
191+
console.log(__filename) // /Users/janelane/Dev/my-project/cypress/background/index.js
195192

196193
console.log(process.cwd()) // /Users/janelane/Dev/my-project
197194
```
198195

199196
# Error handling
200197

201-
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.
202199

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.
204201

205-
Errors from your plugins *will not crash* Cypress.
202+
Errors from your `backgroundFile` *will not crash* Cypress.
206203

207204
# File changes
208205

209206
Normally when writing code in Node, you typically have to restart the process after changing any files.
210207

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.
212209

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

Comments
 (0)