+ 
+
+Record and Run a Test in TestCafe Studio +
+ ## Getting Started ### Installation -Ensure that [Node.js](https://nodejs.org/) (version 4 or newer) and [npm](https://www.npmjs.com/) are installed on your computer before running it: +Ensure that [Node.js](https://nodejs.org/) (version 6 or newer) and [npm](https://www.npmjs.com/) are installed on your computer before running it: ```sh npm install -g testcafe @@ -144,31 +160,25 @@ Read the [Getting Started](https://devexpress.github.io/testcafe/documentation/g ## Documentation -Go to our website for full [documentation](http://devexpress.github.io/testcafe/documentation/using-testcafe/) on TestCafe. +Go to our website for full [documentation](https://devexpress.github.io/testcafe/documentation/getting-started/) on TestCafe. -## Community +## Get Help -Follow us on [Twitter](https://twitter.com/DXTestCafe). We post TestCafe news and updates, several times a week. +Join the TestCafe community on Stack Overflow to get help. Ask and answer [questions with the TestCafe tag](https://stackoverflow.com/questions/tagged/testcafe). -## Badge +## Issue Tracker -Show everyone you are using TestCafe:  +Use our GitHub issues page to [report bugs](https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md) and [suggest improvements](https://github.com/DevExpress/testcafe/issues/new?template=feature_request.md). -To display this badge, add the following code to your repository readme: +## Stay in Touch -```html - -
-
-```
+Follow us on [Twitter](https://twitter.com/DXTestCafe). We post TestCafe news and updates, several times a week.
## Contributing
-Report bugs and request features on our [issues page](https://github.com/DevExpress/testcafe/issues).
+
+```
## Thanks to BrowserStack
diff --git a/appveyor.yml b/appveyor.yml
index 4d3f88d9..80b869ef 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -4,9 +4,35 @@ clone_depth: 1
skip_commits:
message: /^\[docs\]/
+branches:
+ except:
+ - new-docs
+
environment:
- GULP_TASK: "test-functional-local-ie"
- NODEJS_VERSION: "stable"
+ NODEJS_VERSION: "8"
+
+ matrix:
+ - GULP_TASK: "test-functional-local-ie"
+
+for:
+-
+ branches:
+ only:
+ - master
+
+ notifications:
+ - provider: Email
+ to:
+ - boris.kirov@devexpress.com
+ - andrey.belym@devexpress.com
+ - elena.dikareva@devexpress.com
+ on_build_success: false
+ on_build_status_changed: false
+
+ environment:
+ matrix:
+ - GULP_TASK: "test-functional-local-chrome-firefox"
+ - GULP_TASK: "test-functional-local-legacy"
install:
- ps: >-
@@ -27,27 +53,3 @@ build: off
test_script:
- cmd: npm test
-
-for:
--
- branches:
- only:
- - master
-
- notifications:
- - provider: Email
- to:
- - boris.kirov@devexpress.com
- - andrey.belym@devexpress.com
- - elena.dikareva@devexpress.com
- on_build_success: false
- on_build_status_changed: false
-
- test_script:
- - cmd: >-
- node node_modules/gulp/bin/gulp test-functional-local-ie
-
- node node_modules/gulp/bin/gulp test-functional-local-chrome-firefox
-
- node node_modules/gulp/bin/gulp test-functional-local-legacy
-
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
new file mode 100644
index 00000000..7815703e
--- /dev/null
+++ b/azure-pipelines.yml
@@ -0,0 +1,37 @@
+trigger:
+ branches:
+ exclude:
+ - build-bot-temp-*
+ - new-docs
+
+ paths:
+ include:
+ - /bin
+ - /src
+ - /test
+ - /azure-pipelines.yml
+ - /Gulpfile.js
+ - /package.json
+
+pool: 'BrowserStack agents'
+
+steps:
+- bash: |
+ if [[ $BUILD_SOURCEVERSIONMESSAGE =~ ^\[docs\] ]] || [[ ! -f "appveyor.yml" ]]; then
+ echo '##vso[task.setvariable variable=isDocCommit]true'
+ fi
+ displayName: 'Check commit type'
+
+- task: NodeTool@0
+ displayName: 'Install Node.js'
+ condition: and(succeeded(), not(variables['isDocCommit']))
+ timeoutInMinutes: 40
+ inputs:
+ versionSpec: '8.x'
+
+- bash: |
+ npm install --no-progress --loglevel error
+ npm test
+ displayName: 'Run tests'
+ condition: and(succeeded(), not(variables['isDocCommit']))
+ timeoutInMinutes: 40
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 92b9632c..b7fba364 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,16 +1,20 @@
FROM alpine:edge
+ARG packageId
-RUN apk --no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/testing/ add \
- nodejs nodejs-npm chromium firefox xwininfo xvfb dbus eudev ttf-freefont fluxbox
+COPY ${packageId} /opt/testcafe/${packageId}
+COPY docker/testcafe-docker.sh /opt/testcafe/docker/testcafe-docker.sh
-COPY . /opt/testcafe
+RUN apk --no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/testing/ upgrade
+RUN apk --no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/testing/ add \
+ nodejs nodejs-npm chromium firefox xwininfo xvfb dbus eudev ttf-freefont fluxbox procps
-RUN cd /opt/testcafe; \
- npm install --production && \
+RUN npm install -g /opt/testcafe/${packageId} && \
npm cache clean --force && \
rm -rf /tmp/* && \
chmod +x /opt/testcafe/docker/testcafe-docker.sh && \
- adduser -D user
+ adduser -D user && \
+ rm /opt/testcafe/${packageId}
+
USER user
EXPOSE 1337 1338
diff --git a/docker/testcafe-docker.sh b/docker/testcafe-docker.sh
index 646b2460..d2141f7a 100644
--- a/docker/testcafe-docker.sh
+++ b/docker/testcafe-docker.sh
@@ -6,4 +6,4 @@ dbus-daemon --session --fork
Xvfb :1 -screen 0 "${XVFB_SCREEN_WIDTH}x${XVFB_SCREEN_HEIGHT}x24" >/dev/null 2>&1 &
export DISPLAY=:1.0
fluxbox >/dev/null 2>&1 &
-node /opt/testcafe/bin/testcafe.js --ports 1337,1338 "$@"
+node /usr/lib/node_modules/testcafe/bin/testcafe.js --ports 1337,1338 "$@"
diff --git a/docs/README.md b/docs/README.md
index c886dd8c..5413e97e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -70,7 +70,7 @@
* [Specifying Which Requests are Handled by the Hook](articles/documentation/test-api/intercepting-http-requests/specifying-which-requests-are-handled-by-the-hook.md)
* [Attaching Hooks to Tests and Fixtures](articles/documentation/test-api/intercepting-http-requests/attaching-hooks-to-tests-and-fixtures.md)
* [requestOptions Object](articles/documentation/test-api/intercepting-http-requests/requestoptions-object.md)
- * [Waiting for Page Elements to Appear](articles/documentation/test-api/waiting-for-page-elements-to-appear.md)
+ * [Built-In Waiting Mechanisms](articles/documentation/test-api/built-in-waiting-mechanisms.md)
* [Authentication](articles/documentation/test-api/authentication/README.md)
* [User Roles](articles/documentation/test-api/authentication/user-roles.md)
* [HTTP Authentication](articles/documentation/test-api/authentication/http-authentication.md)
@@ -87,8 +87,8 @@
* [Browser Provider Plugin](articles/documentation/extending-testcafe/browser-provider-plugin/README.md)
* [Browser Provider Methods](articles/documentation/extending-testcafe/browser-provider-plugin/browser-provider-methods.md)
* [RECIPES](articles/documentation/recipes/README.md)
- * [Debugging with Chrome Developer Tools](articles/documentation/recipes/debugging-with-chrome-dev-tools.md)
- * [Debugging with Visual Studio Code](articles/documentation/recipes/debugging-with-visual-studio-code.md)
+ * [Debug in Chrome Developer Tools](articles/documentation/recipes/debug-in-chrome-dev-tools.md)
+ * [Debug in Visual Studio Code](articles/documentation/recipes/debug-in-visual-studio-code.md)
* [Integrating TestCafe with CI Systems](articles/documentation/recipes/integrating-testcafe-with-ci-systems/README.md)
* [AppVeyor](articles/documentation/recipes/integrating-testcafe-with-ci-systems/appveyor.md)
* [CircleCI](articles/documentation/recipes/integrating-testcafe-with-ci-systems/circleci.md)
diff --git a/docs/articles/blog/2016-11-8-testcafe-v0-10-0-released.md b/docs/articles/blog/2016-11-8-testcafe-v0-10-0-released.md
index de95deb3..df11af92 100644
--- a/docs/articles/blog/2016-11-8-testcafe-v0-10-0-released.md
+++ b/docs/articles/blog/2016-11-8-testcafe-v0-10-0-released.md
@@ -64,7 +64,7 @@ if (await selector.hasClass('foo')) {
}
```
-See [Snapshot API Shorthands](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#obtain-element-state).
+See [Snapshot API Shorthands](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#obtain-element-state).
### Improved automatic wait mechanism
diff --git a/docs/articles/blog/2016-12-8-testcafe-v0-11-0-released.md b/docs/articles/blog/2016-12-8-testcafe-v0-11-0-released.md
index 2a7320cb..0eb7a895 100644
--- a/docs/articles/blog/2016-12-8-testcafe-v0-11-0-released.md
+++ b/docs/articles/blog/2016-12-8-testcafe-v0-11-0-released.md
@@ -15,7 +15,7 @@ Redesigned selector system, built-in assertions and lots of bug fixes! 🚀🚀
#### New selector methods
-Multiple [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#search-for-elements-in-the-dom-hierarchy) methods were introduced for selectors.
+Multiple [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#search-for-elements-in-the-dom-hierarchy) methods were introduced for selectors.
Now you can build flexible, lazily-evaluated functional-style selector chains.
*Here are some examples:*
@@ -30,7 +30,7 @@ Then, for each `label` element finds a parent that matches the `div.someClass` s
------
Like in jQuery, if you request a [property](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/dom-node-state.html#members-common-across-all-nodes) of the matching set or try evaluate
-a [snapshot](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#dom-node-snapshot), the selector returns values for the first element in the set.
+a [snapshot](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#dom-node-snapshot), the selector returns values for the first element in the set.
```js
// Returns id of the first element in the set
@@ -72,7 +72,7 @@ In this example the selector:
#### Getting selector matching set length
-Also, now you can get selector matching set length and check matching elements existence by using selector [`count` and `exists` properties](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#check-if-an-element-exists).
+Also, now you can get selector matching set length and check matching elements existence by using selector [`count` and `exists` properties](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#check-if-an-element-exists).
#### Unawaited parametrized selector calls now allowed outside test context
@@ -141,14 +141,14 @@ const id = await t.select('.someClass').id;
const id = await Selector('.someClass').id;
```
-* `selectorOptions.index` - use [selector.nth()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#nth) instead.
-* `selectorOptions.text` - use [selector.withText()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#withtext) instead.
-* `selectorOptions.dependencies` - use [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#search-for-elements-in-the-dom-hierarchy) methods to build combined selectors instead.
+* `selectorOptions.index` - use [selector.nth()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#nth) instead.
+* `selectorOptions.text` - use [selector.withText()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#withtext) instead.
+* `selectorOptions.dependencies` - use [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#search-for-elements-in-the-dom-hierarchy) methods to build combined selectors instead.
### ⚙ Built-in assertions. ([#998](https://github.com/DevExpress/testcafe/issues/998))
TestCafe now ships with [numerous built-in BDD-style assertions](http://devexpress.github.io/testcafe/documentation/test-api/assertions/assertion-api.html).
-If the TestCafe assertion receives a [Selector's DOM node state property](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#define-assertion-actual-value) as an actual value, TestCafe uses the [smart assertion query mechanism](http://devexpress.github.io/testcafe/documentation/test-api/assertions/index.html#smart-assertion-query-mechanism):
+If the TestCafe assertion receives a [Selector's DOM node state property](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#define-assertion-actual-value) as an actual value, TestCafe uses the [smart assertion query mechanism](http://devexpress.github.io/testcafe/documentation/test-api/assertions/index.html#smart-assertion-query-mechanism):
if an assertion did not passed, the test does not fail immediately. The assertion retries to pass multiple times and each time it re-requests the actual shorthand value. The test fails if the assertion could not complete successfully within a timeout.
This approach allows you to create stable tests that lack random errors and decrease the amount of time required to run all your tests due to the lack of extra waitings.
diff --git a/docs/articles/blog/2017-1-19-testcafe-v0-12-0-released.md b/docs/articles/blog/2017-1-19-testcafe-v0-12-0-released.md
index dea46034..20282fb2 100644
--- a/docs/articles/blog/2017-1-19-testcafe-v0-12-0-released.md
+++ b/docs/articles/blog/2017-1-19-testcafe-v0-12-0-released.md
@@ -74,7 +74,7 @@ The `t.takeScreenshot`, `t.resizeWindow`, `t.resizeWindowToFitDevice` and `t.max
The state of webpage elements can now be extended with custom properties.
-We have added the [addCustomDOMProperties](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#custom-properties)
+We have added the [addCustomDOMProperties](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/extending-selectors.html#custom-properties)
method to the selector, so that you can add properties to the element state like in the following example.
```js
diff --git a/docs/articles/blog/2017-2-16-testcafe-v0-13-0-released.md b/docs/articles/blog/2017-2-16-testcafe-v0-13-0-released.md
index 74fcfd11..01254477 100644
--- a/docs/articles/blog/2017-2-16-testcafe-v0-13-0-released.md
+++ b/docs/articles/blog/2017-2-16-testcafe-v0-13-0-released.md
@@ -197,9 +197,9 @@ const id = await t.select('.someClass').id;
const id = await Selector('.someClass').id;
```
-* `selectorOptions.index` - use [selector.nth()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#nth) instead.
-* `selectorOptions.text` - use [selector.withText()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#withtext) instead.
-* `selectorOptions.dependencies` - use [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#search-for-elements-in-the-dom-hierarchy) methods to build combined selectors instead.
+* `selectorOptions.index` - use [selector.nth()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#nth) instead.
+* `selectorOptions.text` - use [selector.withText()](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#withtext) instead.
+* `selectorOptions.dependencies` - use [filtering](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#filter-dom-nodes) and [hierarchical](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#search-for-elements-in-the-dom-hierarchy) methods to build combined selectors instead.
## Bug Fixes
diff --git a/docs/articles/blog/2017-3-28-testcafe-v0-14-0-released.md b/docs/articles/blog/2017-3-28-testcafe-v0-14-0-released.md
index c7f15c24..2ee233b9 100644
--- a/docs/articles/blog/2017-3-28-testcafe-v0-14-0-released.md
+++ b/docs/articles/blog/2017-3-28-testcafe-v0-14-0-released.md
@@ -151,7 +151,7 @@ test('Navigate to local pages', async t => {
### ⚙ Adding custom methods to the selector ([#1212](https://github.com/DevExpress/testcafe/issues/1212))
-You can now extend selectors with custom methods executed on the client. Use the [addCustomMethods](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#custom-methods) method to provide custom methods.
+You can now extend selectors with custom methods executed on the client. Use the [addCustomMethods](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/extending-selectors.html#custom-methods) method to provide custom methods.
```js
const myTable = Selector('.my-table').addCustomMethods({
diff --git a/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md b/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md
index 53fe367c..25958200 100644
--- a/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md
+++ b/docs/articles/blog/2017-4-26-testcafe-v0-15-0-released.md
@@ -13,7 +13,7 @@ Plugins for React and Vue.js, TestCafe Docker image, support for Internet access
### New calls to selector's withText method no longer override previous calls
-We have changed the way the [withText](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#withtext)
+We have changed the way the [withText](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#withtext)
method behaves when it is called in a chain.
```js
@@ -103,7 +103,7 @@ docker pull testcafe/testcafe
docker run -v //user/tests:/tests -it testcafe/testcafe firefox tests/**/*.js
```
-To learn more, see [Using TestCafe Docker Image](https://devexpress.github.io/testcafe/documentation/using-testcafe/installing-testcafe.html#using-testcafe-docker-image)
+To learn more, see [Using TestCafe Docker Image](https://devexpress.github.io/testcafe/documentation/using-testcafe/using-testcafe-docker-image.html)
### ⚙ Support for Internet access proxies ([#1206](https://github.com/DevExpress/testcafe/issues/1206))
diff --git a/docs/articles/blog/2018-05-15-testcafe-v0-20-0-released.md b/docs/articles/blog/2018-05-15-testcafe-v0-20-0-released.md
index df57daf2..bb19fac6 100644
--- a/docs/articles/blog/2018-05-15-testcafe-v0-20-0-released.md
+++ b/docs/articles/blog/2018-05-15-testcafe-v0-20-0-released.md
@@ -21,7 +21,7 @@ See [Intercepting HTTP Requests](https://devexpress.github.io/testcafe/documenta
TestCafe now allows you to bypass the proxy server when accessing specific resources.
-To specify resources that require direct access, use the [--proxy-bypass](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--proxy-bypass-rules) flag in the command line or the [useProxy](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html) API method's parameters.
+To specify resources that require direct access, use the [--proxy-bypass](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--proxy-bypass-rules) flag in the command line or the [useProxy](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#useproxy) API method's parameters.
```sh
testcafe chrome my-tests/**/*.js --proxy proxy.corp.mycompany.com --proxy-bypass localhost:8080,internal-resource.corp.mycompany.com
diff --git a/docs/articles/blog/2018-08-02-testcafe-v0-21-0-released.md b/docs/articles/blog/2018-08-02-testcafe-v0-21-0-released.md
new file mode 100644
index 00000000..4af3826d
--- /dev/null
+++ b/docs/articles/blog/2018-08-02-testcafe-v0-21-0-released.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: TestCafe v0.21.0 Released
+permalink: /blog/:title.html
+---
+# TestCafe v0.21.0 Released
+
+Test web pages served over HTTPS, construct screenshot paths with patterns and use more info in custom reporters.
+
+
+
+## Enhancements
+
+### ⚙ Test Web Pages Served Over HTTPS ([#1985](https://github.com/DevExpress/testcafe/issues/1985))
+
+Some browser features (like [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API), [ApplePaySession](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession), or [SubtleCrypto](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto)) require a secure origin. This means that the website should use the HTTPS protocol.
+
+Starting with v0.21.0, TestCafe can serve proxied web pages over HTTPS. This allows you to test pages that require a secure origin.
+
+To enable HTTPS when you use TestCafe through the command line, specify the [--ssl](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--ssl-options) flag followed by the [HTTPS server options](https://nodejs.org/api/https.html#https_https_createserver_options_requestlistener). The most commonly used options are described in the [TLS topic](https://nodejs.org/api/tls.html#tls_tls_createsecurecontext_options) in the Node.js documentation.
+
+```sh
+testcafe --ssl pfx=path/to/file.pfx;rejectUnauthorized=true;...
+```
+
+When you use a programming API, pass the HTTPS server options to the [createTestCafe](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/createtestcafe.html) method.
+
+```js
+'use strict';
+
+const createTestCafe = require('testcafe');
+const selfSignedSertificate = require('openssl-self-signed-certificate');
+let runner = null;
+
+const sslOptions = {
+ key: selfSignedSertificate.key,
+ cert: selfSignedSertificate.cert
+};
+
+createTestCafe('localhost', 1337, 1338, sslOptions)
+ .then(testcafe => {
+ runner = testcafe.createRunner();
+ })
+ .then(() => {
+ return runner
+ .src('test.js')
+
+ // Browsers restrict self-signed certificate usage unless you
+ // explicitly set a flag specific to each browser.
+ // For Chrome, this is '--allow-insecure-localhost'.
+ .browsers('chrome --allow-insecure-localhost')
+ .run();
+ });
+```
+
+See [Connect to TestCafe Server over HTTPS](https://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/connect-to-the-testcafe-server-over-https.html) for more information.
+
+### ⚙ Construct Screenshot Paths with Patterns ([#2152](https://github.com/DevExpress/testcafe/issues/2152))
+
+You can now use patterns to construct paths to screenshots. TestCafe provides a number of placeholders you can include in the path, for example, `${DATE}`, `${TIME}`, `${USERAGENT}`, etc. For a complete list, refer to the command line [--screenshot-path-pattern flag description](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-p---screenshot-path-pattern).
+
+You specify a screenshot path pattern when you run tests. Each time TestCafe takes a screenshot, it substitutes the placeholders with actual values and saves the screenshot to the resulting path.
+
+The following example shows how to specify a screenshot path pattern through the command line:
+
+```sh
+testcafe all test.js -s screenshots -p '${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png'
+```
+
+When you use a programming API, pass the screenshot path pattern to the [runner.screenshots method](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#screenshots).
+
+```js
+runner.screenshots('reports/screenshots/', true, '${TEST_INDEX}/${OS}/${BROWSER}-v${BROWSER_VERSION}/${FILE_INDEX}.png');
+```
+
+### ⚙ Add Info About Screenshots and Quarantine Attempts to Custom Reports ([#2216](https://github.com/DevExpress/testcafe/issues/2216))
+
+Custom reporters can now access screenshots' data and the history of quarantine attempts (if the test run in the quarantine mode).
+
+The following information about screenshots is now available:
+
+* the path to the screenshot file,
+* the path to the thumbnail image,
+* the user agent of the browser in which the screenshot was taken,
+* the quarantine attempt number (if the screenshot was taken in the quarantine mode),
+* whether the screenshot was taken because the test failed.
+
+If the test was run in the quarantine mode, you can also determine which attempts failed and passed.
+
+Refer to the [reportTestDone method description](https://devexpress.github.io/testcafe/documentation/extending-testcafe/reporter-plugin/reporter-methods.html#reporttestdone) for details on how to access this information.
+
+## Bug Fixes
+
+* HTML5 drag events are no longer simulated if `event.preventDefault` is called for the `mousedown` event ([#2529](https://github.com/DevExpress/testcafe/issues/2529))
+* File upload no longer causes an exception when there are several file inputs on the page ([#2642](https://github.com/DevExpress/testcafe/issues/2642))
+* File upload now works with inputs that have the `required` attribute ([#2509](https://github.com/DevExpress/testcafe/issues/2509))
+* The `load` event listener is no longer triggered when added to an image ([testcafe-hammerhead/#1688](https://github.com/DevExpress/testcafe-hammerhead/issues/1688))
diff --git a/docs/articles/blog/2018-09-03-testcafe-v0-22-0-released.md b/docs/articles/blog/2018-09-03-testcafe-v0-22-0-released.md
new file mode 100644
index 00000000..773abb90
--- /dev/null
+++ b/docs/articles/blog/2018-09-03-testcafe-v0-22-0-released.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: TestCafe v0.22.0 Released
+permalink: /blog/:title.html
+---
+# TestCafe v0.22.0 Released
+
+Write tests in CoffeeScript, view failed selector methods in test run reports and detect server-side errors and unhandled promise rejections.
+
+
+
+## Enhancements
+
+### ⚙ CoffeeScript Support ([#1556](https://github.com/DevExpress/testcafe/issues/1556)) by [@GeoffreyBooth](https://github.com/GeoffreyBooth)
+
+TestCafe now allows you to write tests in CoffeeScript. You do not need to compile CoffeeScript manually or make any customizations - everything works out of the box.
+
+```coffee
+import { Selector } from 'testcafe'
+
+fixture 'CoffeeScript Example'
+ .page 'https://devexpress.github.io/testcafe/example/'
+
+nameInput = Selector '#developer-name'
+
+test 'Test', (t) =>
+ await t
+ .typeText(nameInput, 'Peter')
+ .typeText(nameInput, 'Paker', { replace: true })
+ .typeText(nameInput, 'r', { caretPos: 2 })
+ .expect(nameInput.value).eql 'Parker';
+```
+
+### ⚙ Failed Selector Method Pinpointed in the Report ([#2568](https://github.com/DevExpress/testcafe/issues/2568))
+
+Now the test run report can identify which selector's method does not match any DOM element.
+
+
+
+### ⚙ Fail on Uncaught Server Errors ([#2546](https://github.com/DevExpress/testcafe/issues/2546))
+
+Previously, TestCafe ignored uncaught errors and unhandled promise rejections that occurred on the server. Whenever an error or a promise rejection happened, test execution continued.
+
+Starting from v0.22.0, tests fail if a server error or promise rejection is unhandled. To return to the previous behavior, we have introduced the `skipUncaughtErrors` option. Use the [--skip-uncaught-errors](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-u---skip-uncaught-errors) flag in the command line or the [skipUncaughtErrors](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#run) option in the API.
+
+```sh
+testcafe chrome tests/fixture.js --skipUncaughtErrors
+```
+
+```js
+runner.run({skipUncaughtErrors:true})
+```
+
+### ⚙ Use Glob Patterns in `runner.src` ([#980](https://github.com/DevExpress/testcafe/issues/980))
+
+You can now use [glob patterns](https://github.com/isaacs/node-glob#glob-primer) in the [runner.src](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#src) method to specify a set of test files.
+
+```js
+runner.src(['/home/user/tests/**/*.js', '!/home/user/tests/foo.js']);
+```
+
+## Bug Fixes
+
+* `RequestLogger` no longer fails when it tries to stringify a null request body ([#2718](https://github.com/DevExpress/testcafe/issues/2718))
+* Temporary directories are now correctly removed when the test run is finished ([#2735](https://github.com/DevExpress/testcafe/issues/2735))
+* TestCafe no longer throws `ECONNRESET` when run against a Webpack project ([#2711](https://github.com/DevExpress/testcafe/issues/2711))
+* An error is no longer thrown when TestCafe tests Sencha ExtJS applications in IE11 ([#2639](https://github.com/DevExpress/testcafe/issues/2639))
+* Firefox no longer waits for page elements to appear without necessity ([#2080](https://github.com/DevExpress/testcafe/issues/2080))
+* `${BROWSER}` in the screenshot pattern now correctly resolves to the browser name ([#2742](https://github.com/DevExpress/testcafe/issues/2742))
+* The `toString` function now returns a native string for overridden descriptor ancestors ([testcafe-hammerhead/#1713](https://github.com/DevExpress/testcafe-hammerhead/issues/1713))
+* The `iframe` flag is no longer added when a form with `target="_parent"` is submitted ([testcafe-hammerhead/#1680](https://github.com/DevExpress/testcafe-hammerhead/issues/1680))
+* Hammerhead no longer sends request headers in lower case ([testcafe-hammerhead/#1380](https://github.com/DevExpress/testcafe-hammerhead/issues/1380))
+* The overridden `createHTMLDocument` method has the right context now ([testcafe-hammerhead/#1722](https://github.com/DevExpress/testcafe-hammerhead/issues/1722))
+* Tests no longer lose connection ([testcafe-hammerhead/#1647](https://github.com/DevExpress/testcafe-hammerhead/issues/1647))
+* The case when both the `X-Frame-Options` header and a CSP with `frame-ancestors` are set is now handled correctly ([testcafe-hammerhead/#1666](https://github.com/DevExpress/testcafe-hammerhead/issues/1666))
+* The mechanism that resolves URLs on the client now works correctly ([testcafe-hammerhead/#1701](https://github.com/DevExpress/testcafe-hammerhead/issues/1701))
+* `LiveNodeListWrapper` now imitates the native behavior correctly ([testcafe-hammerhead/#1376](https://github.com/DevExpress/testcafe-hammerhead/issues/1376))
diff --git a/docs/articles/blog/2018-10-25-testcafe-v0-23-0-released.md b/docs/articles/blog/2018-10-25-testcafe-v0-23-0-released.md
new file mode 100644
index 00000000..d6de7f34
--- /dev/null
+++ b/docs/articles/blog/2018-10-25-testcafe-v0-23-0-released.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: TestCafe v0.23.0 Released
+permalink: /blog/:title.html
+---
+# TestCafe v0.23.0 Released
+
+Stop a test run after the first test fail, view JavaScript errors' stack trace in test run reports and let TestCafe restart browsers when they stop responding.
+
+
+
+## Enhancements
+
+### ⚙ Stop Test Run After the First Test Fail ([#1323](https://github.com/DevExpress/testcafe/issues/1323))
+
+You can now configure TestCafe to stop the entire test run after the first test fail. This saves your time when you fix problems with your tests one by one.
+
+Specify the [--sf](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--sf---stop-on-first-fail) flag to enable this feature when you run tests from the command line.
+
+```sh
+testcafe chrome my-tests --sf
+```
+
+In the API, use the [stopOnFirstFail](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#run) option.
+
+```js
+runner.run({ stopOnFirstFail: true })
+```
+
+### ⚙ View the JavaScript Errors' Stack Traces in Reports ([#2043](https://github.com/DevExpress/testcafe/issues/2043))
+
+Now when a JavaScript error occurs on the tested webpage, the test run report includes a stack trace for this error (only if the [--skip-js-errors](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-e---skip-js-errors) option is disabled).
+
+
+
+### ⚙ Browsers are Automatically Restarted When They Stop Responding ([#1815](https://github.com/DevExpress/testcafe/issues/1815))
+
+If a browser stops responding while it executes tests, TestCafe restarts the browser and reruns the current test in a new browser instance.
+If the same problem occurs with this test two more times, the test run finishes and an error is thrown.
+
+## Bug Fixes
+
+* An error message about an unawaited call to an async function is no longer displayed when an uncaught error occurs ([#2557](https://github.com/DevExpress/testcafe/issues/2557))
+* A request hook is no longer added multiple times when a filter rule is used ([#2650](https://github.com/DevExpress/testcafe/issues/2650))
+* Screenshot links in test run reports now contain paths specified by the `--screenshot-pattern` option ([#2726](https://github.com/DevExpress/testcafe/issues/2726))
+* Assertion chains no longer produce unhandled promise rejections ([#2852](https://github.com/DevExpress/testcafe/issues/2852))
+* The `moment` loader now works correctly in the Jest environment ([#2500](https://github.com/DevExpress/testcafe/issues/2500))
+* TestCafe no longer hangs if the screenshot directory contains forbidden symbols ([#681](https://github.com/DevExpress/testcafe/issues/681))
+* The `--ssl` option's parameters are now parsed correctly ([#2924](https://github.com/DevExpress/testcafe/issues/2924))
+* TestCafe now throws a meaningful error if an assertion method is missing ([#1063](https://github.com/DevExpress/testcafe/issues/1063))
+* TestCafe no longer hangs when it clicks a custom element ([#2861](https://github.com/DevExpress/testcafe/issues/2861))
+* TestCafe now performs keyboard navigation between radio buttons/groups in a way that matches the native browser behavior ([#2067](https://github.com/DevExpress/testcafe/issues/2067), [#2045](https://github.com/DevExpress/testcafe/issues/2045))
+* The `fetch` method can now be used with data URLs ([#2865](https://github.com/DevExpress/testcafe/issues/2865))
+* The `switchToIframe` function no longer throws an error ([#2956](https://github.com/DevExpress/testcafe/issues/2956))
+* TestCafe can now scroll through fixed elements when the action has custom offsets ([#2978](https://github.com/DevExpress/testcafe/issues/2978))
+* You can now specify the current directory or its parent directories as the base path to store screenshots ([#2975](https://github.com/DevExpress/testcafe/issues/2975))
+* Tests no longer hang up when you try to debug in headless browsers ([#2846](https://github.com/DevExpress/testcafe/issues/2846))
+* The `removeEventListener` function now works correctly when an object is passed as its third argument ([testcafe-hammerhead/#1737](https://github.com/DevExpress/testcafe-hammerhead/issues/1737))
+* Hammerhead no longer adds the `event` property to a null `contentWindow` in IE11 ([testcafe-hammerhead/#1684](https://github.com/DevExpress/testcafe-hammerhead/issues/1684))
+* The browser no longer resets connection with the server for no reason ([testcafe-hammerhead/#1647](https://github.com/DevExpress/testcafe-hammerhead/issues/1647))
+* Hammerhead now stringifies values correctly before outputting them to the console ([testcafe-hammerhead/#1750](https://github.com/DevExpress/testcafe-hammerhead/issues/1750))
+* A document fragment from the top window can now be correctly appended to an iframe ([testcafe-hammerhead/#912](https://github.com/DevExpress/testcafe-hammerhead/issues/912))
+* Lifecycle callbacks that result from the `document.registerElement` method are no longer called twice ([testcafe-hammerhead/#695](https://github.com/DevExpress/testcafe-hammerhead/issues/695))
diff --git a/docs/articles/blog/2018-11-7-testcafe-v0-23-1-released.md b/docs/articles/blog/2018-11-7-testcafe-v0-23-1-released.md
new file mode 100644
index 00000000..f7b8d7cf
--- /dev/null
+++ b/docs/articles/blog/2018-11-7-testcafe-v0-23-1-released.md
@@ -0,0 +1,61 @@
+---
+layout: post
+title: TestCafe v0.23.1 Released
+permalink: /blog/:title.html
+---
+# TestCafe v0.23.1 Released
+
+Select tests and fixtures to run by their metadata and run dynamically loaded tests.
+
+
+
+## Enhancements
+
+### ⚙ Select Tests and Fixtures to Run by Their Metadata ([#2527](https://github.com/DevExpress/testcafe/issues/2527)) by [@NickCis](https://github.com/NickCis)
+
+You can now run only those tests or fixtures whose [metadata](https://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#specifying-testing-metadata) contains a specific set of values.
+
+Use the [--test-meta](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--test-meta-keyvaluekey2value2) flag to specify values to look for in test metadata.
+
+```sh
+testcafe chrome my-tests --test-meta device=mobile,env=production
+```
+
+To select fixtures by their metadata, use the [--fixture-meta](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--fixture-meta-keyvaluekey2value2) flag.
+
+```sh
+testcafe chrome my-tests --fixture-meta subsystem=payments,type=regression
+```
+
+In the API, test and fixture metadata is now passed to the [runner.filter](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#filter) method in the `testMeta` and `fixtureMeta` parameters. Use this metadata to decide whether to run the current test.
+
+```js
+runner.filter((testName, fixtureName, fixturePath, testMeta, fixtureMeta) => {
+ return testMeta.mobile === 'true' &&
+ fixtureMeta.env === 'staging';
+});
+```
+
+### ⚙ Run Dynamically Loaded Tests ([#2074](https://github.com/DevExpress/testcafe/issues/2074))
+
+You can now run tests imported from external libraries or generated dynamically even if the `.js` file you provide to TestCafe does not contain any tests.
+
+Previously, this was not possible because TestCafe required test files to contain the [fixture](https://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#fixtures) and [test](https://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#tests) directives. Now you can bypass this check. To do this, provide the [--disable-test-syntax-validation](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#--disable-test-syntax-validation) command line flag.
+
+```sh
+testcafe safari test.js --disable-test-syntax-validation
+```
+
+In the API, use the [disableTestSyntaxValidation](https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#run) option.
+
+```js
+runner.run({ disableTestSyntaxValidation: true })
+```
+
+## Bug Fixes
+
+* Touch events are now simulated with correct touch properties (`touches`, `targetTouches`, `changedTouches`) ([#2856](https://github.com/DevExpress/testcafe/issues/2856))
+* Google Chrome now closes correctly on macOS after tests are finished ([#2860](https://github.com/DevExpress/testcafe/issues/2860))
+* Internal attribute and node changes no longer provoke `MutationObserver` notifications ([testcafe-hammerhead/#1769](https://github.com/DevExpress/testcafe-hammerhead/issues/1769))
+* The `ECONNABORTED` error is no longer raised ([testcafe-hammerhead/#1744](https://github.com/DevExpress/testcafe-hammerhead/issues/1744))
+* Websites that use `Location.ancestorOrigins` are now proxied correctly ([testcafe-hammerhead/#1342](https://github.com/DevExpress/testcafe-hammerhead/issues/1342))
diff --git a/docs/articles/documentation/README.md b/docs/articles/documentation/README.md
index 4e63203b..67333927 100644
--- a/docs/articles/documentation/README.md
+++ b/docs/articles/documentation/README.md
@@ -1,8 +1,3 @@
----
-layout: docs
-title: Documentation
-permalink: /documentation/
----
# Documentation
* [Getting Started](getting-started/README.md)
diff --git a/docs/articles/documentation/extending-testcafe/reporter-plugin/reporter-methods.md b/docs/articles/documentation/extending-testcafe/reporter-plugin/reporter-methods.md
index f775e2bf..890b107c 100644
--- a/docs/articles/documentation/extending-testcafe/reporter-plugin/reporter-methods.md
+++ b/docs/articles/documentation/extending-testcafe/reporter-plugin/reporter-methods.md
@@ -6,7 +6,12 @@ checked: false
---
# Reporter Methods
-You should implement the following methods to create a [reporter](README.md#implementing-the-reporter).
+You should implement the following methods to create a [reporter](README.md#implementing-the-reporter):
+
+* [reportTaskStart](#reporttaskstart)
+* [reportFixtureStart](#reportfixturestart)
+* [reportTestDone](#reporttestdone)
+* [reportTaskDone](#reporttaskdone)
> You can use the [helper methods and libraries](helpers.md) within the reporter methods to output the required data.
@@ -81,19 +86,9 @@ reportTestDone (name, testRunInfo, meta)
Parameter | Type | Description
------------- | ------ | -------------------------------------------------------------
`name` | String | The test name.
-`testRunInfo` | Object | The object providing detailed information about the test run.
+`testRunInfo` | Object | The [testRunInfo](#testruninfo-object) object.
`meta` | Object | The test metadata. See [Specifying Testing Metadata](../../test-api/test-code-structure.md#specifying-testing-metadata) for more information.
-The `testRunInfo` object has the following properties.
-
-Property | Type | Description
----------------- | ---------------- | --------------------------------------------------------
-`errs` | Array or Strings | An array of errors that occurred during a test run.
-`durationMs` | Number | The time spent on test execution (in milliseconds).
-`unstable` | Boolean | Specifies if the test is marked as unstable.
-`screenshotPath` | String | The directory path where screenshots have been saved to.
-`skipped` | Boolean | Specifies if the test was skipped.
-
**Example**
```js
@@ -124,6 +119,40 @@ reportTestDone (name, testRunInfo, meta) {
//=> skipped First fixture - Fourth test in first fixture
```
+### testRunInfo Object
+
+The `testRunInfo` object provides detailed information about the test run. The object has the following properties:
+
+Property | Type | Description
+------------------- | ---------------- | --------------------------------------------------------
+`errs` | Array of Strings | An array of errors that occurred during the test run.
+`durationMs` | Number | The time spent on test execution (in milliseconds).
+`unstable` | Boolean | Specifies if the test is marked as unstable.
+`screenshotPath` | String | The path where screenshots are saved.
+`screenshots` | Array of Objects | An array of [screenshot](#screenshots-object) objects.
+`quarantine` | Object | A [quarantine](#quarantine-object) object.
+`skipped` | Boolean | Specifies if the test was skipped.
+
+### screenshots Object
+
+The `screenshot` object provides information about the screenshot captured during the test run. The object has the following properties:
+
+Property | Type | Description
+------------------- | ---------------- | --------------------------------------------------------
+`screenshotPath` | String | The path where the screenshot was saved.
+`thumbnailPath` | String | The path where the screenshot's thumbnail was saved.
+`userAgent` | String | The user agent string of the browser where the screenshot was captured.
+`quarantineAttempt` | Number | The [quarantine](../../using-testcafe/programming-interface/runner.md#quarantine-mode) attempt's number.
+`takenOnFail` | Boolean | Specifies if the screenshot was captured when the test failed.
+
+### quarantine Object
+
+The `quarantine` object provides information about [quarantine](../../using-testcafe/programming-interface/runner.md#quarantine-mode)'s attempts in the form of key-value pairs.
+
+Key | Value
+----------------------------------| ------------------------------------------------
+The quarantine attempt's number. | The object that provides information about the attempt. The object has the boolean `passed` property that specifies if the test passed in the current attempt.
+
## reportTaskDone
Fires when the task ends.
diff --git a/docs/articles/documentation/getting-started/README.md b/docs/articles/documentation/getting-started/README.md
index 42025381..dc9feca2 100644
--- a/docs/articles/documentation/getting-started/README.md
+++ b/docs/articles/documentation/getting-started/README.md
@@ -2,6 +2,8 @@
layout: docs
title: Getting Started
permalink: /documentation/getting-started/
+redirect_from:
+ - /documentation/
---
# Getting Started
@@ -158,7 +160,7 @@ A functional test should also check the result of actions performed.
For example, the article header on the "Thank you" page should address a user using the entered name.
To check if the header is correct, you have to add an assertion to the test.
-The following test demonstrates how to use [build-in assertions](../test-api/assertions/README.md).
+The following test demonstrates how to use [built-in assertions](../test-api/assertions/README.md).
```js
import { Selector } from 'testcafe';
diff --git a/docs/articles/documentation/recipes/README.md b/docs/articles/documentation/recipes/README.md
index df329452..9da33b44 100644
--- a/docs/articles/documentation/recipes/README.md
+++ b/docs/articles/documentation/recipes/README.md
@@ -2,13 +2,15 @@
layout: docs
title: Recipes
permalink: /documentation/recipes/
+redirect_from:
+ - /documentation/recipes/running-tests-in-firefox-and-chrome-using-travis-ci.html
---
# Recipes
This section provides examples and recipes of how to use TestCafe in different scenarios.
-* [Debugging with Chrome Developer Tools](debugging-with-chrome-dev-tools.md)
-* [Debugging with Visual Studio Code](debugging-with-visual-studio-code.md)
+* [Debug in Chrome Developer Tools](debug-in-chrome-dev-tools.md)
+* [Debug in Visual Studio Code](debug-in-visual-studio-code.md)
* [Finding Code Issues with Flow Type Checker](finding-code-issues-with-flow-type-checker.md)
* [Integrating TestCafe with CI Systems](integrating-testcafe-with-ci-systems/README.md)
* [Running Tests Using Travis CI and Sauce Labs](running-tests-using-travis-ci-and-sauce-labs.md)
diff --git a/docs/articles/documentation/recipes/debugging-with-chrome-dev-tools.md b/docs/articles/documentation/recipes/debug-in-chrome-dev-tools.md
similarity index 86%
rename from docs/articles/documentation/recipes/debugging-with-chrome-dev-tools.md
rename to docs/articles/documentation/recipes/debug-in-chrome-dev-tools.md
index 7e71284e..1679068e 100644
--- a/docs/articles/documentation/recipes/debugging-with-chrome-dev-tools.md
+++ b/docs/articles/documentation/recipes/debug-in-chrome-dev-tools.md
@@ -1,9 +1,11 @@
---
layout: docs
-title: Debugging with Chrome Developer Tools
-permalink: /documentation/recipes/debugging-with-chrome-dev-tools.html
+title: Debug in Chrome Developer Tools
+permalink: /documentation/recipes/debug-in-chrome-dev-tools.html
+redirect_from:
+ - /documentation/recipes/debugging-with-chrome-dev-tools.html
---
-# Debugging with Chrome Developer Tools
+# Debug in Chrome Developer Tools
Starting with version 6.3.0, Node.js allows you to debug applications in Chrome Developer Tools.
If you have Chrome and an appropriate version of Node.js installed on your machine,
diff --git a/docs/articles/documentation/recipes/debug-in-visual-studio-code.md b/docs/articles/documentation/recipes/debug-in-visual-studio-code.md
new file mode 100644
index 00000000..5d9504ea
--- /dev/null
+++ b/docs/articles/documentation/recipes/debug-in-visual-studio-code.md
@@ -0,0 +1,72 @@
+---
+layout: docs
+title: Debug in Visual Studio Code
+permalink: /documentation/recipes/debug-in-visual-studio-code.html
+redirect_from:
+ - /documentation/recipes/debugging-with-visual-studio-code.html
+---
+# Debug in Visual Studio Code
+
+Before you debug in Visual Studio Code, ensure that your root test directory contains a `package.json` file that includes `testcafe` in the `devDependencies` section.
+
+```json
+{
+ "devDependencies": {
+ "testcafe": "x.y.z"
+ }
+}
+```
+
+where `x.y.z` is the TestCafe version you use.
+
+Then you need to install TestCafe locally in the test directory.
+
+```sh
+npm install
+```
+
+The next step adds a launch configuration used to run TestCafe tests.
+
+
+
+See the [Visual Studio Code documentation](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) to learn how to create a configuration.
+
+You need to add the following configuration to the `launch.json` file.
+
+```json
+{
+ "type": "node",
+ "protocol": "inspector",
+ "request": "launch",
+ "name": "Launch test files with TestCafe",
+ "program": "${workspaceRoot}/node_modules/testcafe/bin/testcafe.js",
+ "args": [
+ "firefox",
+ "${relativeFile}"
+ ],
+ "console": "integratedTerminal",
+ "cwd": "${workspaceRoot}"
+}
+```
+
+This configuration contains the following attributes:
+
+* `type` - specifies the configuration type. Set to `node` for a Node.js configuration.
+* `protocol` - specifies the Node.js [debugger wire protocol](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_supported-nodelike-runtimes). Note that the inspector protocol is supported in Node.js v6.3 (or v6.9 for Windows) or later. For early versions, omit this property. In that case, Node.js uses a legacy debugger protocol. The legacy protocol has issues with source map support, therefore newer versions of Node.js are recommended.
+* `request` - specifies the request type. Set to `launch` since this configuration launches a program.
+* `name` - specifies the configuration name.
+* `program` - path to the executed JS file. In this case, this file is the TestCafe module.
+* `args` - [command line arguments](../using-testcafe/command-line-interface.md) passed to the launched program. In this case, they specify the browser in which the tests should run and the relative path to the test file.
+* `console` - the console where the test run report is printed. In this case, the report is output to the integrated terminal. You can learn about other available values in the [Launch.json attributes](https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes) topic.
+* `cwd` - the current working directory. Set to the workspace root.
+
+Save the `launch.json` file. The new configuration then appears in the configuration drop-down.
+
+
+
+Now you can open a file with TestCafe tests, select the `"Launch test files with TestCafe"` configuration and click the **Run** button.
+Tests run with the debugger attached. You can put breakpoints in test code and the debugger stops at them.
+
+
+
+> Important! If you do not select the `"Launch test files with TestCafe"` configuration, Visual Studio Code tries to run the test file as a program and throws an error.
diff --git a/docs/articles/documentation/recipes/debugging-with-visual-studio-code.md b/docs/articles/documentation/recipes/debugging-with-visual-studio-code.md
deleted file mode 100644
index 4b2dfc0a..00000000
--- a/docs/articles/documentation/recipes/debugging-with-visual-studio-code.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: docs
-title: Debugging with Visual Studio Code
-permalink: /documentation/recipes/debugging-with-visual-studio-code.html
----
-# Debugging with Visual Studio Code
-
-Before debugging in Visual Studio Code, ensure that your root test directory contains a `package.json` file that includes `testcafe` in the `devDependencies` section.
-
-```json
-{
- "devDependencies": {
- "testcafe": "x.y.z"
- }
-}
-```
-
-where `x.y.z` is the TestCafe version you use.
-
-Then you need to install TestCafe locally in the tests directory via `npm`.
-
-```sh
-npm install
-```
-
-The next step is adding a launch configuration that runs TestCafe tests. See the [Visual Studio Code documentation](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) to learn how to create a configuration.
-
-You will need to add the following configuration to the `launch.json` file.
-
-```json
-{
- "type": "node",
- "protocol": "inspector",
- "request": "launch",
- "name": "Launch test files with TestCafe",
- "program": "${workspaceRoot}/node_modules/testcafe/bin/testcafe.js",
- "args": [
- "firefox",
- "${file}"
- ],
- "cwd": "${workspaceRoot}"
-}
-```
-
-This configuration contains the following attributes:
-
-* `type` - specifies the type of the configuration. Set to `node` for a Node.js configuration.
-* `protocol` - specifies the Node.js [debugger wire protocol](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_supported-nodelike-runtimes). Note that the inspector protocol is supported in Node.js v6.3 (or v6.9 for Windows) or later. For early versions, omit this property. In that case, a legacy debugger protocol will be used. Legacy protocol is well known for its issues with source map support, therefore newer versions of Node.js are recommended.
-* `request` - specifies the request type. Set to `launch` since this configuration launches a program.
-* `name` - specifies the name of the configuration.
-* `program` - path to a JS file that will be executed. In this case, it is the TestCafe module.
-* `args` - [command line arguments](../using-testcafe/command-line-interface.md) passed to the launched program. In this case, they specify the browser in which the tests should run and the test file.
-* `cwd` - the current working directory. Set to the workspace root.
-
-Save the `launch.json` file. The new configuration will appear in the configuration drop-down.
-
-Now you can open a file with TestCafe tests, select the configuration you have just created and click the Run button.
-Tests will run with the debugger attached. You can put breakpoints in test code and the debugger will stop at them.
diff --git a/docs/articles/documentation/recipes/using-page-model.md b/docs/articles/documentation/recipes/using-page-model.md
index 2f3028b9..5ddabaf5 100644
--- a/docs/articles/documentation/recipes/using-page-model.md
+++ b/docs/articles/documentation/recipes/using-page-model.md
@@ -8,6 +8,18 @@ permalink: /documentation/recipes/using-page-model.html
[Page Model](http://martinfowler.com/bliki/PageObject.html) is a test automation pattern that allows you to create an abstraction of the tested page
and use it in test code to refer to page elements.
+* [Why Use Page Model](#why-use-page-model)
+* [Create a Page Model](#create-a-page-model)
+ * [Step 1 - Declare a Page Model Class](#step-1---declare-a-page-model-class)
+ * [Step 2 - Add a Page Element to the Page Model](#step-2---add-a-page-element-to-the-page-model)
+ * [Step 3 - Write a Test That Uses the Page Model](#step-3---write-a-test-that-uses-the-page-model)
+ * [Step 4 - Add a New Class for Check Boxes](#step-4---add-a-new-class-for-check-boxes)
+ * [Step 5 - Add a List of Check Boxes to the Page Model](#step-5---add-a-list-of-check-boxes-to-the-page-model)
+ * [Step 6 - Write a Test That Iterates Through Check Boxes](#step-6---write-a-test-that-iterates-through-check-boxes)
+ * [Step 7 - Add Actions to the Page Model](#step-7---add-actions-to-the-page-model)
+ * [Step 8 - Write a Test That Calls Actions From the Page Model](#step-8---write-a-test-that-calls-actions-from-the-page-model)
+* [Page Model Example](#page-model-example)
+
## Why Use Page Model
Consider the following fixture with two tests: one that types and edits
@@ -51,137 +63,230 @@ Generally speaking, the Page Model pattern allows you to follow
the separation of concerns principle - you keep page representation in the Page Model,
while tests remain focused on the behavior.
-## Creating a Page Model
+## Create a Page Model
-1. Begin with a new `.js` file and declare the `Page` class there.
+### Step 1 - Declare a Page Model Class
- ```js
- export default class Page {
- constructor () {
- }
+Begin with a new `.js` file and declare the `Page` class there.
+
+```js
+export default class Page {
+ constructor () {
}
- ```
+}
+```
- This class will contain the Page Model, so name the file `page-model.js`.
+This class will contain the Page Model, so name the file `page-model.js`.
-2. Add the `Developer Name` input element to the model. To do this,
- introduce the `nameInput` property and assign a [selector](../test-api/selecting-page-elements/selectors/README.md) to it.
+### Step 2 - Add a Page Element to the Page Model
- ```js
- import { Selector } from 'testcafe';
+Add the `Developer Name` input element to the model. To do this,
+introduce the `nameInput` property and assign a [selector](../test-api/selecting-page-elements/selectors/README.md) to it.
+
+```js
+import { Selector } from 'testcafe';
- export default class Page {
- constructor () {
- this.nameInput = Selector('#developer-name');
- }
+export default class Page {
+ constructor () {
+ this.nameInput = Selector('#developer-name');
}
- ```
+}
+```
-3. In the test file, import `page-model.js` and create an instance of the `Page` class.
- After that, you can use the `page.nameInput` property to identify the `Developer Name` input element.
+### Step 3 - Write a Test That Uses the Page Model
- ```js
- import Page from './page-model';
+In the test file, import `page-model.js` and create an instance of the `Page` class.
+After that, you can use the `page.nameInput` property to identify the `Developer Name` input element.
- const page = new Page();
+```js
+import Page from './page-model';
- fixture `My fixture`
- .page `https://devexpress.github.io/testcafe/example/`;
+const page = new Page();
- test('Text typing basics', async t => {
- await t
- .typeText(page.nameInput, 'Peter')
- .typeText(page.nameInput, 'Paker', { replace: true })
- .typeText(page.nameInput, 'r', { caretPos: 2 })
- .expect(page.nameInput.value).eql('Parker');
- });
- ```
+fixture `My fixture`
+ .page `https://devexpress.github.io/testcafe/example/`;
-4. Add check boxes from the Features section to the Page Model.
+test('Text typing basics', async t => {
+ await t
+ .typeText(page.nameInput, 'Peter')
+ .typeText(page.nameInput, 'Paker', { replace: true })
+ .typeText(page.nameInput, 'r', { caretPos: 2 })
+ .expect(page.nameInput.value).eql('Parker');
+});
+```
- As long as each item in the Features section contains a check box and a label,
- introduce a new class `Feature` with two properties: `label` and `checkbox`.
+### Step 4 - Add a New Class for Check Boxes
- ```js
- import { Selector } from 'testcafe';
+Add check boxes from the Features section to the Page Model.
+
+As long as each item in the Features section contains a check box and a label,
+introduce a new class `Feature` with two properties: `label` and `checkbox`.
- const label = Selector('label');
+```js
+import { Selector } from 'testcafe';
+
+const label = Selector('label');
- class Feature {
- constructor (text) {
- this.label = label.withText(text);
- this.checkbox = this.label.find('input[type=checkbox]');
- }
+class Feature {
+ constructor (text) {
+ this.label = label.withText(text);
+ this.checkbox = this.label.find('input[type=checkbox]');
}
+}
- export default class Page {
- constructor () {
- this.nameInput = Selector('#developer-name');
- }
+export default class Page {
+ constructor () {
+ this.nameInput = Selector('#developer-name');
}
- ```
+}
+```
-5. In the `Page` class, add the `featureList` property with an array of `Feature` objects.
+### Step 5 - Add a List of Check Boxes to the Page Model
- ```js
- import { Selector } from 'testcafe';
+In the `Page` class, add the `featureList` property with an array of `Feature` objects.
+
+```js
+import { Selector } from 'testcafe';
- const label = Selector('label');
+const label = Selector('label');
- class Feature {
- constructor (text) {
- this.label = label.withText(text);
- this.checkbox = this.label.find('input[type=checkbox]');
- }
+class Feature {
+ constructor (text) {
+ this.label = label.withText(text);
+ this.checkbox = this.label.find('input[type=checkbox]');
}
+}
- export default class Page {
- constructor () {
- this.nameInput = Selector('#developer-name');
- this.featureList = [
- new Feature('Support for testing on remote devices'),
- new Feature('Re-using existing JavaScript code for testing'),
- new Feature('Easy embedding into a Continuous integration system')
- ];
- }
+export default class Page {
+ constructor () {
+ this.nameInput = Selector('#developer-name');
+ this.featureList = [
+ new Feature('Support for testing on remote devices'),
+ new Feature('Re-using existing JavaScript code for testing'),
+ new Feature('Easy embedding into a Continuous integration system')
+ ];
}
- ```
+}
+```
+
+Organizing check boxes in an array makes the page model semantically correct and simplifies iterating through the check boxes.
+
+### Step 6 - Write a Test That Iterates Through Check Boxes
+
+The second test now boils down to a single loop.
+
+```js
+import Page from './page-model';
- Organizing check boxes in an array makes the page model semantically correct and simplifies iterating through the check boxes.
+fixture `My fixture`
+ .page `https://devexpress.github.io/testcafe/example/`;
-6. The second test now boils down to a single loop.
+const page = new Page();
+
+test('Text typing basics', async t => {
+ await t
+ .typeText(page.nameInput, 'Peter')
+ .typeText(page.nameInput, 'Paker', { replace: true })
+ .typeText(page.nameInput, 'r', { caretPos: 2 })
+ .expect(page.nameInput.value).eql('Parker');
+});
+
+test('Click check boxes and then verify their state', async t => {
+ for (const feature of page.featureList) {
+ await t
+ .click(feature.label)
+ .expect(feature.checkbox.checked).ok();
+ }
+});
+```
+
+### Step 7 - Add Actions to the Page Model
+
+Add an action that enters the developer name and clicks the Submit button.
+
+1. Import `t`, a [test controller](../test-api/test-code-structure.md#test-controller), from the `testcafe` module.
```js
- import Page from './page-model';
+ import { Selector, t } from 'testcafe';
+ ```
- fixture `My fixture`
- .page `https://devexpress.github.io/testcafe/example/`;
+2. Add a Submit button to the page model.
- const page = new Page();
+ ```js
+ this.submitButton = Selector('#submit-button');
+ ```
+
+3. Declare an [asynchronous function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) in the `Page` class. This function uses the test controller to perform several actions on the tested page: enter the developer name and click the Submit button.
- test('Text typing basics', async t => {
+ ```js
+ async submitName (name) {
await t
- .typeText(page.nameInput, 'Peter')
- .typeText(page.nameInput, 'Paker', { replace: true })
- .typeText(page.nameInput, 'r', { caretPos: 2 })
- .expect(page.nameInput.value).eql('Parker');
- });
-
- test('Click check boxes and then verify their state', async t => {
- for (const feature of page.featureList) {
- await t
- .click(feature.label)
- .expect(feature.checkbox.checked).ok();
- }
- });
+ .typeText(this.nameInput, name)
+ .click(this.submitButton);
+ }
```
-**Example**
+Here is how the page model looks now.
-This sample shows a page model for the example page at [https://devexpress.github.io/testcafe/example/](https://devexpress.github.io/testcafe/example/).
+```js
+import { Selector, t } from 'testcafe';
+
+const label = Selector('label');
+
+class Feature {
+ constructor (text) {
+ this.label = label.withText(text);
+ this.checkbox = this.label.find('input[type=checkbox]');
+ }
+}
+
+export default class Page {
+ constructor () {
+ this.nameInput = Selector('#developer-name');
+
+ this.featureList = [
+ new Feature('Support for testing on remote devices'),
+ new Feature('Re-using existing JavaScript code for testing'),
+ new Feature('Easy embedding into a Continuous integration system')
+ ];
+
+ this.submitButton = Selector('#submit-button');
+ }
+
+ async submitName (name) {
+ await t
+ .typeText(this.nameInput, name)
+ .click(this.submitButton);
+ }
+}
+```
+
+### Step 8 - Write a Test That Calls Actions From the Page Model
+
+Now write a test that calls `page.submitName` and checks the message on the Thank You page.
+
+```js
+test('Submit a developer name and check the header', async t => {
+ const header = Selector('#article-header');
+
+ await page.submitName('Peter');
+
+ await t.expect(header.innerText).eql('Thank you, Peter!');
+});
+```
+
+This test works with a different page for which there is no page model. That is why it uses a selector. Don't forget to import it to the test file.
```js
import { Selector } from 'testcafe';
+```
+
+## Page Model Example
+
+This sample shows a page model for the example page at [https://devexpress.github.io/testcafe/example/](https://devexpress.github.io/testcafe/example/).
+
+```js
+import { Selector, t } from 'testcafe';
const label = Selector('label');
@@ -229,6 +334,13 @@ export default class Page {
this.interfaceSelect = Selector('#preferred-interface');
this.interfaceSelectOption = this.interfaceSelect.find('option');
+ this.submitButton = Selector('#submit-button');
+ }
+
+ async submitName (name) {
+ await t
+ .typeText(this.nameInput, name)
+ .click(this.submitButton);
}
}
```
\ No newline at end of file
diff --git a/docs/articles/documentation/test-api/README.md b/docs/articles/documentation/test-api/README.md
index 96874e4f..52ebe3f0 100644
--- a/docs/articles/documentation/test-api/README.md
+++ b/docs/articles/documentation/test-api/README.md
@@ -6,12 +6,11 @@ checked: true
---
# Test API
-TestCafe allows you to write tests using JavaScript and TypeScript (see [TypeScript Support](typescript-support.md) for more information about writing tests in TypeScript).
+TestCafe allows you to write tests using JavaScript, [TypeScript](typescript-support.md) and [CoffeeScript](coffeescript-support.md).
The following topics demonstrate how to organize test code:
* [Test Code Structure](test-code-structure.md)
-* [TypeScript Support](typescript-support.md)
The following topics describe the API used to manipulate the webpage and check its state:
@@ -20,7 +19,7 @@ The following topics describe the API used to manipulate the webpage and check i
* [Assertions](assertions/README.md)
* [Obtaining Data From the Client](obtaining-data-from-the-client/README.md)
* [Intercepting HTTP Requests](intercepting-http-requests/README.md)
-* [Waiting for Page Elements to Appear](waiting-for-page-elements-to-appear.md)
+* [Built-In Waiting Mechanisms](built-in-waiting-mechanisms.md)
* [Authentication](authentication/README.md)
* [Pausing the Test](pausing-the-test.md)
* [Handling Native Dialogs](handling-native-dialogs.md)
diff --git a/docs/articles/documentation/test-api/actions/navigate.md b/docs/articles/documentation/test-api/actions/navigate.md
index 47f7efa8..9fff7af3 100644
--- a/docs/articles/documentation/test-api/actions/navigate.md
+++ b/docs/articles/documentation/test-api/actions/navigate.md
@@ -40,4 +40,7 @@ test('Navigate to local pages', async t => {
.navigateTo('file:///user/my-website/index.html')
.navigateTo('../my-project/index.html');
});
-```
\ No newline at end of file
+```
+
+TestCafe automatically waits for the server to respond after a redirect happens.
+The test is resumed if the server does not respond within **15** seconds.
\ No newline at end of file
diff --git a/docs/articles/documentation/test-api/actions/resize-window.md b/docs/articles/documentation/test-api/actions/resize-window.md
index ac8549cc..268cb40b 100644
--- a/docs/articles/documentation/test-api/actions/resize-window.md
+++ b/docs/articles/documentation/test-api/actions/resize-window.md
@@ -8,12 +8,14 @@ checked: true
There are three ways of resizing a browser window.
-**Note**: these actions require a [ICCCM/EWMH-compliant window manager](https://en.wikipedia.org/wiki/Comparison_of_X_window_managers) on Linux.
-
* [Setting the Window Size](#setting-the-window-size)
* [Fitting the Window into a Particular Device](#fitting-the-window-into-a-particular-device)
* [Maximizing the Window](#maximizing-the-window)
+> Important! Window resize actions are not supported when you run tests in [remote browsers](../../using-testcafe/common-concepts/browsers/browser-support.md#browsers-on-remote-devices).
+
+**Note**: these actions require .NET 4.0 or newer installed on Windows machines and an [ICCCM/EWMH-compliant window manager](https://en.wikipedia.org/wiki/Comparison_of_X_window_managers) on Linux.
+
## Setting the Window Size
```text
diff --git a/docs/articles/documentation/test-api/actions/take-screenshot.md b/docs/articles/documentation/test-api/actions/take-screenshot.md
index 4ce6007e..efe4b76a 100644
--- a/docs/articles/documentation/test-api/actions/take-screenshot.md
+++ b/docs/articles/documentation/test-api/actions/take-screenshot.md
@@ -6,12 +6,13 @@ checked: true
---
# Take Screenshot
-This topic describes how you can take screenshots of the tested page.
+This topic describes how to take screenshots of the tested page.
-**Note**: these actions require a [ICCCM/EWMH-compliant window manager](https://en.wikipedia.org/wiki/Comparison_of_X_window_managers) on Linux.
+> Important! Screenshot actions are not supported when you run tests in [remote browsers](../../using-testcafe/common-concepts/browsers/browser-support.md#browsers-on-remote-devices).
-> Important! If the screenshot directory is not specified with the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option,
-> the screenshot actions are ignored.
+**Note**: these actions require .NET 4.0 or newer installed on Windows machines and an [ICCCM/EWMH-compliant window manager](https://en.wikipedia.org/wiki/Comparison_of_X_window_managers) on Linux.
+
+> Important! Screenshot actions are ignored if the screenshot directory is not specified with the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [--screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option.
## Take a Screenshot of the Entire Page
@@ -21,14 +22,9 @@ t.takeScreenshot( [path] )
Parameter | Type | Description
------------------- | ------ | -----------------------------------------------------------------------------------------------------
-`path` *(optional)* | String | The relative path and the name of the screenshot file to be created. Resolved from the *screenshot directory* specified by using the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option.
-
-By default, the path to which screenshots are saved is specified as:
-
-* `{currentDate}\test-{testIndex}\{userAgent}\{screenshotIndex}.png` if the [quarantine mode](../../using-testcafe/command-line-interface.md#-q---quarantine-mode) is disabled;
-* `{currentDate}\test-{testIndex}\run-{quarantineAttempt}\{userAgent}\{screenshotIndex}.png` if the [quarantine mode](../../using-testcafe/command-line-interface.md#-q---quarantine-mode) is enabled.
+`path` *(optional)* | String | The screenshot file's relative path and name. The path is relative to the base directory specified by the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option. This path overrides the relative path the default or custom [path patterns](../../using-testcafe/command-line-interface.md#path-patterns) specify.
-The following example shows how to use the `t.takeScreenshot` action.
+The following example shows how to use the `t.takeScreenshot` action:
```js
import { Selector } from 'testcafe';
@@ -54,9 +50,9 @@ Takes a screenshot of the specified page element.
Parameter | Type | Description
------------------------ | ------ | -----------------------------------------------------------------------------------------------------
-`selector` | Function | String | Selector | Snapshot | Promise | Identifies the webpage element whose screenshot will be taken. See [Selecting Target Elements](README.md#selecting-target-elements).
-`path` *(optional)* | String | The relative path and the name of the screenshot file to be created. Resolved from the *screenshot directory* specified by using the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option.
-`options` *(optional)* | Object | Options that define how the screenshot will be taken. See details below.
+`selector` | Function | String | Selector | Snapshot | Promise | Identifies the webpage element whose screenshot should be taken. See [Selecting Target Elements](README.md#selecting-target-elements).
+`path` *(optional)* | String | The screenshot file's relative path and name. The path is relative to the root directory specified by using the [runner.screenshots](../../using-testcafe/programming-interface/runner.md#screenshots) API method or the [screenshots](../../using-testcafe/command-line-interface.md#-s-path---screenshots-path) command line option. This path overrides the relative path the default or custom [path patterns](../../using-testcafe/command-line-interface.md#path-patterns) specify.
+`options` *(optional)* | Object | Options that define how the screenshot is taken. See details below.
```js
import { Selector } from 'testcafe';
@@ -72,16 +68,11 @@ test('Take a screenshot of a fieldset', async t => {
});
```
-By default, the path to which screenshots are saved is specified as:
-
-* `{currentDate}\test-{testIndex}\{userAgent}\{screenshotIndex}.png` if the [quarantine mode](../../using-testcafe/command-line-interface.md#-q---quarantine-mode) is disabled;
-* `{currentDate}\test-{testIndex}\run-{quarantineAttempt}\{userAgent}\{screenshotIndex}.png` if the [quarantine mode](../../using-testcafe/command-line-interface.md#-q---quarantine-mode) is enabled.
-
-The `options` object contains the following properties.
+The `options` object contains the following properties:
Property | Type | Description | Default
--------------- | ---- | ------------- | ----------
-`scrollTargetX`, `scrollTargetY` | Number | If the target element is too big to fit into the browser window, the page will be scrolled to put this point to the center of the viewport. The coordinates of this point are calculated relative to the target element. If the numbers are positive, the point is positioned relative to the top-left corner of the element. If the numbers are negative, the point is positioned relative to the bottom-right corner. If the target element fits into the browser window, these properties have no effect. | The center of the element. If the `crop` rectangle is specified, its center. If the `crop` rectangle is larger than the viewport, the center of the viewport.
+`scrollTargetX`, `scrollTargetY` | Number | If the target element is too big to fit into the browser window, the page is scrolled to put this point to the center of the viewport. The coordinates of this point are calculated relative to the target element. If the numbers are positive, the point is positioned relative to the top-left corner of the element. If the numbers are negative, the point is positioned relative to the bottom-right corner. If the target element fits into the browser window, these properties have no effect. | The center of the element. If the `crop` rectangle is specified, its center. If the `crop` rectangle is larger than the viewport, the center of the viewport.
`includeMargins` | Boolean | Specifies whether to include target element's margins in the screenshot. When it is enabled, the `scrollTargetX`, `scrollTargetY` and `crop` rectangle coordinates are calculated from the corners where top and left (or bottom and right) margins intersect. | `false`
`includeBorders` | Boolean | Specifies whether to include target element's borders in the screenshot. When it is enabled, the `scrollTargetX`, `scrollTargetY` and `crop` rectangle coordinates are calculated from the corners where top and left (or bottom and right) internal edges of the element intersect. | `true`
`includePaddings` | Boolean | Specifies whether to include target element's paddings in the screenshot. When it is enabled, the `scrollTargetX`, `scrollTargetY` and `crop` rectangle coordinates are calculated from the corners where top and left (or bottom and right) edges of the element's content area intersect. | `true`
diff --git a/docs/articles/documentation/test-api/authentication/user-roles.md b/docs/articles/documentation/test-api/authentication/user-roles.md
index 10534d82..890007a7 100644
--- a/docs/articles/documentation/test-api/authentication/user-roles.md
+++ b/docs/articles/documentation/test-api/authentication/user-roles.md
@@ -131,4 +131,26 @@ TestCafe will navigate to the saved URL each time after you switch to this role.
This option is useful if you store session-related data (like session ID) in the URL.
+```js
+import { Role } from 'testcafe';
+
+const role = Role('http://example.com/login', async t => {
+ await t
+ .typeText('#login', 'username')
+ .typeText('#password', 'password')
+ .click('#sign-in'); // Redirects to http://example.com?sessionId=abcdef
+}, { preserveUrl: true });
+
+fixture `My Fixture`;
+
+test('My test', async t => {
+ await t
+ .navigateTo('http://example.com/')
+
+ // Does not return to http://example.com/ but
+ // stays at http://example.com?sessionId=abcdef instead
+ // because options.preserveUrl is enabled.
+ .useRole(role);
+```
+
**Default value**: `false`
\ No newline at end of file
diff --git a/docs/articles/documentation/test-api/waiting-for-page-elements-to-appear.md b/docs/articles/documentation/test-api/built-in-waiting-mechanisms.md
similarity index 83%
rename from docs/articles/documentation/test-api/waiting-for-page-elements-to-appear.md
rename to docs/articles/documentation/test-api/built-in-waiting-mechanisms.md
index 0578c918..893a65fc 100644
--- a/docs/articles/documentation/test-api/waiting-for-page-elements-to-appear.md
+++ b/docs/articles/documentation/test-api/built-in-waiting-mechanisms.md
@@ -1,14 +1,16 @@
---
layout: docs
-title: Waiting for Page Elements to Appear
-permalink: /documentation/test-api/waiting-for-page-elements-to-appear.html
+title: Built-In Waiting Mechanisms
+permalink: /documentation/test-api/built-in-waiting-mechanisms.html
+redirect_from:
+ - /documentation/test-api/waiting-for-page-elements-to-appear.html
---
-# Waiting for Page Elements to Appear
+# Built-In Waiting Mechanisms
-TestCafe has a built-in automatic waiting mechanism, so that it does not need dedicated API to wait for page elements to appear.
+TestCafe has built-in automatic waiting mechanisms, so that it does not need dedicated API to wait for page elements to appear or redirects to happen.
-This topic describes how the automatic waiting mechanism works with [test actions](actions/README.md),
-[assertions](assertions/README.md) and [selectors](selecting-page-elements/selectors/README.md).
+This topic describes how these mechanisms work with [test actions](actions/README.md),
+[assertions](assertions/README.md), [selectors](selecting-page-elements/selectors/README.md) and navigation.
## Waiting for Action Target Elements
@@ -109,4 +111,9 @@ test('My test', async t => {
// or the timeout passes.
.expect(nameInput.value).eql('Peter Parker');
});
-```
\ No newline at end of file
+```
+
+## Waiting for Redirects
+
+When an action triggers a redirect, TestCafe automatically waits for the server to respond.
+The test is resumed if the server does not respond within **15** seconds.
\ No newline at end of file
diff --git a/docs/articles/documentation/test-api/coffeescript-support.md b/docs/articles/documentation/test-api/coffeescript-support.md
new file mode 100644
index 00000000..14accc44
--- /dev/null
+++ b/docs/articles/documentation/test-api/coffeescript-support.md
@@ -0,0 +1,28 @@
+---
+layout: docs
+title: CoffeeScript Support
+permalink: /documentation/test-api/coffeescript-support.html
+---
+# CoffeeScript Support
+
+TestCafe allows you to write tests with [CoffeeScript](https://coffeescript.org/).
+
+**Example**
+
+```coffee
+import { Selector } from 'testcafe'
+
+fixture 'CoffeeScript Example'
+ .page 'https://devexpress.github.io/testcafe/example/'
+
+nameInput = Selector '#developer-name'
+
+test 'Test', (t) =>
+ await t
+ .typeText(nameInput, 'Peter')
+ .typeText(nameInput, 'Paker', { replace: true })
+ .typeText(nameInput, 'r', { caretPos: 2 })
+ .expect(nameInput.value).eql 'Parker';
+```
+
+You can run CoffeeScript tests in the same manner as JavaScript tests. TestCafe automatically compiles the CoffeeScript code, so you do not need to compile it manually.
\ No newline at end of file
diff --git a/docs/articles/documentation/test-api/debugging.md b/docs/articles/documentation/test-api/debugging.md
index 47db5aa2..ef44e6fc 100644
--- a/docs/articles/documentation/test-api/debugging.md
+++ b/docs/articles/documentation/test-api/debugging.md
@@ -16,8 +16,8 @@ TestCafe allows you to debug server-side test code and test behavior on the clie
You can debug test code in Chrome Developer Tools and popular IDEs. See the following recipes for details.
-* [Debugging with Chrome Developer Tools](../recipes/debugging-with-chrome-dev-tools.md)
-* [Debugging with Visual Studio Code](../recipes/debugging-with-visual-studio-code.md)
+* [Debug in Chrome Developer Tools](../recipes/debug-in-chrome-dev-tools.md)
+* [Debug in Visual Studio Code](../recipes/debug-in-visual-studio-code.md)
## Client-Side Debugging
diff --git a/docs/articles/documentation/test-api/handling-native-dialogs.md b/docs/articles/documentation/test-api/handling-native-dialogs.md
index 74886d09..78d57b1c 100644
--- a/docs/articles/documentation/test-api/handling-native-dialogs.md
+++ b/docs/articles/documentation/test-api/handling-native-dialogs.md
@@ -62,7 +62,7 @@ Dialog Type | Return Value | Defaul
------------ | -------------------------------------------------------- | --------------
alert | Ignored | 'OK' button.
beforeunload | Ignored | 'Leave' button. There is no way to emulate 'Stay' programmatically.
-confirm | `true` to answer 'Yes'; `false` to answer 'No'. | 'No' button.
+confirm | `true` to answer 'OK'; `false` to answer 'Cancel'. | 'Cancel' button.
prompt | A string that contains text to be typed into the prompt. | 'Cancel' button.
The following example demonstrates how to handle an alert dialog.
diff --git a/docs/articles/documentation/test-api/intercepting-http-requests/attaching-hooks-to-tests-and-fixtures.md b/docs/articles/documentation/test-api/intercepting-http-requests/attaching-hooks-to-tests-and-fixtures.md
index f8914d28..3ced586f 100644
--- a/docs/articles/documentation/test-api/intercepting-http-requests/attaching-hooks-to-tests-and-fixtures.md
+++ b/docs/articles/documentation/test-api/intercepting-http-requests/attaching-hooks-to-tests-and-fixtures.md
@@ -9,20 +9,20 @@ checked: true
To attach a hook to a test or fixture, use the `fixture.requestHooks` and `test.requestHooks` methods. A hook attached to a fixture handles requests from all tests in the fixture.
```text
-fixture.requestHooks(...hook)
-test.requestHooks(...hook)
+fixture.requestHooks(...hooks)
+test.requestHooks(...hooks)
```
You can also attach and detach hooks during test run using the `t.addRequestHooks` and `t.removeRequestHooks` methods.
```text
-t.addRequestHooks(...hook)
+t.addRequestHooks(...hooks)
t.removeRequestHooks(...hooks)
```
Parameter | Type | Description
--------- | ---- | ------------
-`hook` | RequestHook subclass | A `RequestLogger`, `RequestMock` or custom user-defined hook.
+`hooks` | RequestHook subclass | A `RequestLogger`, `RequestMock` or custom user-defined hook.
The `fixture.requestHooks`, `test.requestHooks` `t.addRequestHooks` and `t.removeRequestHooks` methods use the rest operator which allows you to pass multiple hooks as parameters or arrays of hooks.
diff --git a/docs/articles/documentation/test-api/intercepting-http-requests/logging-http-requests.md b/docs/articles/documentation/test-api/intercepting-http-requests/logging-http-requests.md
index 63dea196..a1d2318e 100644
--- a/docs/articles/documentation/test-api/intercepting-http-requests/logging-http-requests.md
+++ b/docs/articles/documentation/test-api/intercepting-http-requests/logging-http-requests.md
@@ -32,10 +32,10 @@ Option | Type | Description | Default
------ | ---- | ------------- | ---------
`logRequestHeaders` | Boolean | Specifies whether the request headers should be logged. | `false`
`logRequestBody` | Boolean | Specifies whether the request body should be logged. | `false`
-`stringifyRequestBody` | Boolean | Specifies whether the request body should be stored as a String or a [Buffer](https://nodejs.org/api/buffer.html). | `false`
+`stringifyRequestBody` | Boolean | Specifies whether the request body should be stored as a String or a [Buffer](https://nodejs.org/api/buffer.html). When you set `stringifyRequestBody` to `true`, make sure that the request body is logged (`logRequestBody` is also `true`). Otherwise, an error is thrown. | `false`
`logResponseHeaders` | Boolean | Specifies whether the response headers should be logged. | `false`
`logResponseBody` | Boolean | Specifies whether the response body should be logged. | `false`
-`stringifyResponseBody` | Boolean | Specifies whether the response body should be stored as a string or a [Buffer](https://nodejs.org/api/buffer.html). | `false`
+`stringifyResponseBody` | Boolean | Specifies whether the response body should be stored as a string or a [Buffer](https://nodejs.org/api/buffer.html). When you set `stringifyResponseBody` to `true`, make sure that the response body is logged (`logResponseBody` is also `true`). Otherwise, an error is thrown. | `false`
```js
import { RequestLogger } from 'testcafe';
diff --git a/docs/articles/documentation/test-api/intercepting-http-requests/specifying-which-requests-are-handled-by-the-hook.md b/docs/articles/documentation/test-api/intercepting-http-requests/specifying-which-requests-are-handled-by-the-hook.md
index 0ff5616c..fb72cd3d 100644
--- a/docs/articles/documentation/test-api/intercepting-http-requests/specifying-which-requests-are-handled-by-the-hook.md
+++ b/docs/articles/documentation/test-api/intercepting-http-requests/specifying-which-requests-are-handled-by-the-hook.md
@@ -39,7 +39,7 @@ const logger = RequestLogger(/.co.uk/);
```js
const mock = RequestMock()
- .onRequestTo('/\/api\/users\//')
+ .onRequestTo(/\/api\/users\//)
.respond(/*...*/);
```
diff --git a/docs/articles/documentation/test-api/obtaining-data-from-the-client.md b/docs/articles/documentation/test-api/obtaining-data-from-the-client.md
deleted file mode 100644
index cef4fd95..00000000
--- a/docs/articles/documentation/test-api/obtaining-data-from-the-client.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-layout: docs
-title: Obtaining Data from the Client
-permalink: /documentation/test-api/obtaining-data-from-the-client.html
-checked: true
----
-# Obtaining Data from the Client
-
-TestCafe allows you to create *client functions* that can return any
-serializable value from the client side, like the current URL
-or custom data calculated by a client script.
-
-> Important! Do not modify the tested webpage within client functions.
-> To interact with the page, use [test actions](actions/README.md).
-
-This topic contains the following sections.
-
-* [Creating Client Functions](#creating-client-functions)
- * [Running Asynchronous Client Code](#running-asynchronous-client-code)
-* [Executing Client Functions](#executing-client-functions)
-* [Options](#options)
-* [One-Time Client Code Execution](#one-time-client-code-execution)
-* [Calling Client Functions from Node.js Callbacks](#calling-client-functions-from-nodejs-callbacks)
-* [Limitations](#limitations)
-
-## Creating Client Functions
-
-To create a client function, use the `ClientFunction` constructor.
-
-```text
-ClientFunction( fn [, options] )
-```
-
-Parameter | Type | Description
----------------------- | -------- | ---------------------------------------------
-`fn` | Function | A function to be executed on the client side.
-`options` *(optional)* | Object | See [Options](#options).
-
-> Important! Client functions cannot return DOM nodes. Use [selectors](selecting-page-elements/selectors/README.md) for this.
-
-The following example shows how to create a client function.
-
-```js
-import { ClientFunction } from 'testcafe';
-
-const getWindowLocation = ClientFunction(() => window.location);
-```
-
-### Running Asynchronous Client Code
-
-You can create client functions that run asynchronous code.
-To this end, pass a function that returns a Promise to the `ClientFunction` constructor.
-In this instance, the client function will complete only when this Promise resolves.
-
-```js
-import { ClientFunction } from 'testcafe';
-
-const performAsyncOperation = ClientFunction(() => {
- return Promise(resolve => {
- window.setTimeout(resolve, 500); // some async operations
- });
-});
-```
-
-## Executing Client Functions
-
-To execute a client function, call it with the `await` keyword.
-
-```js
-import { ClientFunction } from 'testcafe';
-
-const getWindowLocation = ClientFunction(() => window.location);
-
-fixture `My fixture`
- .page `http://www.example.com/`;
-
-test('My Test', async t => {
- const location = await getWindowLocation();
-});
-```
-
-## Options
-
-You can pass the following options to the
-[ClientFunction constructor](#creating-client-functions) and the
-[t.eval](#one-time-client-code-execution) function.
-
-### options.dependencies
-
-**Type**: Object
-
-Contains functions, variables or objects used by the client function internally.
-Properties of the `dependencies` object will be added to the client function's scope as variables.
-
-The following sample demonstrates a client function (`getArticleHeaderHTML`) that
-calls a [selector](selecting-page-elements/selectors/README.md) (`articleHeader`) internally.
-This selector is passed to `getArticleHeaderHTML` as a dependency.
-
-```js
-import { Selector, ClientFunction } from 'testcafe';
-
-const articleHeader = Selector('#article-header');
-
-const getArticleHeaderHTML = ClientFunction(() => articleHeader().innerHTML, {
- dependencies: { articleHeader }
-});
-```
-
-> When a client function calls a [selector](selecting-page-elements/selectors/README.md) internally,
-> the selector does not wait for the element to appear in the DOM
-> but is executed at once, like a client function.
-
-### options.boundTestRun
-
-**Type**: Object
-
-If you need to call a client function from a Node.js callback,
-assign the current [test controller](test-code-structure.md#test-controller)
-to the `boundTestRun` option.
-
-For details, see [Calling Client Functions from Node.js Callbacks](#calling-client-functions-from-nodejs-callbacks).
-
-### Overwriting Options
-
-You can overwrite client function options by using the ClientFunction's `with` function.
-
-```text
-clientFunction.with( options ) → ClientFunction
-```
-
-`with` returns a new client function with a different set of options that includes options
-from the original function and new `options` that overwrite the original ones.
-
-The sample below shows how to overwrite the client function options.
-
-```js
-import { Selector, ClientFunction } from 'testcafe';
-
-const option = Selector('option');
-
-const thirdOption = option.nth(2);
-
-const getThirdOptionHTML = ClientFunction(() => option().innerHTML, {
- dependencies: { option: thirdOption }
-});
-
-const fourthOption = option.nth(3);
-
-const getFourthOptionHTML = getThirdOptionHTML.with({
- dependencies: { option: fourthOption }
-});
-```
-
-## One-Time Client Code Execution
-
-To create a client function and immediately execute it without saving it,
-use the `eval` method of the [test controller](test-code-structure.md#test-controller).
-
-```text
-t.eval( fn [, options] )
-```
-
-Parameter | Type | Description
----------------------- | -------- | --------------------------------------------------------------------------
-`fn` | Function | A function to be executed on the client side.
-`options` *(optional)* | Object | See [Options](#options).
-
-The following example shows how to get the document's URI with `t.eval`.
-
-```js
-fixture `My fixture`
- .page `http://www.example.com/`;
-
-test('My Test', async t => {
- const docURI = await t.eval(() => document.documentURI);
-});
-```
-
-## Calling Client Functions from Node.js Callbacks
-
-Client functions need access to the [test controller](test-code-structure.md#test-controller) to be executed.
-When called right from the test function, they implicitly obtain the test controller.
-
-However, if you need to call a client function from a Node.js callback that fires during the test run,
-you will have to manually bind this function to the test controller.
-
-Use the [boundTestRun](#optionsboundtestrun) option for this.
-
-```js
-import fs from 'fs';
-import { ClientFunction } from 'testcafe';
-
-fixture `My fixture`
- .page `http://www.example.com/`;
-
-const getDataFromClient = ClientFunction(() => getSomeData());
-
-test('Check client data', async t => {
- const boundGetDataFromClient = getDataFromClient.with({ boundTestRun: t });
-
- const equal = await new Promise(resolve => {
- fs.readFile('/home/user/tests/reference/clientData.json', (err, data) => {
- boundGetDataFromClient().then(clientData => {
- resolve(JSON.stringify(clientData) === data);
- });
- });
- });
-
- await t.expect(equal).ok();
-});
-```
-
-This approach only works for Node.js callbacks that fire during the test run. To ensure that the test function
-does not finish before the callback is executed, suspend the test until the callback fires. You can do this
-by introducing a promise and synchronously waiting for it to complete as shown in the example above.
-
-## Limitations
-
-* You cannot use generators or `async/await` syntax within client functions.
-
-* Client functions cannot access variables defined in the outer scope in test code.
- However, you can use arguments to pass data inside these functions, except for self-invoking functions
- that cannot take any parameters from the outside.
-
- Likewise, the return value is the only way to obtain data from client functions.
diff --git a/docs/articles/documentation/test-api/obtaining-data-from-the-client/README.md b/docs/articles/documentation/test-api/obtaining-data-from-the-client/README.md
index 0a428b29..70580116 100644
--- a/docs/articles/documentation/test-api/obtaining-data-from-the-client/README.md
+++ b/docs/articles/documentation/test-api/obtaining-data-from-the-client/README.md
@@ -2,7 +2,8 @@
layout: docs
title: Obtaining Data from the Client
permalink: /documentation/test-api/obtaining-data-from-the-client/
-checked: true
+redirect_from:
+ - /documentation/test-api/obtaining-data-from-the-client.html
---
# Obtaining Data from the Client
@@ -20,6 +21,7 @@ This topic contains the following sections.
* [Executing Client Functions](#executing-client-functions)
* [Options](#options)
* [One-Time Client Code Execution](#one-time-client-code-execution)
+* [Import Functions to be Used as Client Function Dependencies](#import-functions-to-be-used-as-client-function-dependencies)
* [Calling Client Functions from Node.js Callbacks](#calling-client-functions-from-nodejs-callbacks)
* [Limitations](#limitations)
@@ -178,6 +180,41 @@ test('My Test', async t => {
> Since the `eval` method returns a value, not an object, you cannot call other methods of the test controller in the chain after calling 'eval'.
+## Import Functions to be Used as Client Function Dependencies
+
+Assume you have a JS file `utils.js` with a function you need to use as a client function dependency in your test file.
+
+**utils.js**
+
+```js
+export function getDocumentURI() {
+ return document.documentURI;
+}
+```
+
+Note that TestCafe internally processes test files with [Babel](https://babeljs.io). To avoid issues caused by code transpiling, use the [require](https://nodejs.org/api/modules.html#modules_require) function instead of the `import` statement to import client function dependencies.
+
+**test.js**
+
+```js
+import { ClientFunction } from 'testcafe';
+
+const getDocumentURI = require('./utils.js').getDocumentURI;
+
+fixture `My fixture`
+ .page `http://devexpress.github.io/testcafe/example/`;
+
+test('My test', async t => {
+ const getUri = ClientFunction(() => {
+ return getDocumentURI();
+ }, { dependencies: { getDocumentURI } });
+
+ const uri = await getUri();
+
+ await t.expect(uri).eql('http://devexpress.github.io/testcafe/example/');
+});
+```
+
## Calling Client Functions from Node.js Callbacks
Client functions need access to the [test controller](../test-code-structure.md#test-controller) to be executed.
diff --git a/docs/articles/documentation/test-api/obtaining-data-from-the-client/examples-of-using-client-functions.md b/docs/articles/documentation/test-api/obtaining-data-from-the-client/examples-of-using-client-functions.md
index 242a2cb0..2001e73e 100644
--- a/docs/articles/documentation/test-api/obtaining-data-from-the-client/examples-of-using-client-functions.md
+++ b/docs/articles/documentation/test-api/obtaining-data-from-the-client/examples-of-using-client-functions.md
@@ -136,7 +136,7 @@ test('My Test', async t => {
});
```
-> Note that the `getChildNodeText` client function uses the `testedPage` selector that is passed to it as a dependency. See [options.dependencies](../obtaining-data-from-the-client.md#optionsdependencies) for more information.
+> Note that the `getChildNodeText` client function uses the `testedPage` selector that is passed to it as a dependency. See [options.dependencies](README.md#optionsdependencies) for more information.
## Complex DOM Queries
diff --git a/docs/articles/documentation/test-api/selecting-page-elements/framework-specific-selectors.md b/docs/articles/documentation/test-api/selecting-page-elements/framework-specific-selectors.md
index e90622bf..7ebafc7a 100644
--- a/docs/articles/documentation/test-api/selecting-page-elements/framework-specific-selectors.md
+++ b/docs/articles/documentation/test-api/selecting-page-elements/framework-specific-selectors.md
@@ -11,6 +11,7 @@ For this purpose, the TestCafe team and community developed libraries of dedicat
* [React](#react)
* [Angular](#angular)
+* [AngularJS](#angularjs)
* [Vue](#vue)
* [Aurelia](#aurelia)
@@ -42,29 +43,6 @@ To learn more, see the [repository documentation](https://github.com/DevExpress/
## Angular
-### AngularJS
-
-`AngularJSSelector` contains a set of static methods to search for an HTML element by the specified binding (`byModel`, `byBinding`, etc.).
-
-```js
-import { AngularJSSelector } from 'testcafe-angular-selectors';
-import { Selector } from 'testcafe';
-
-fixture `TestFixture`
- .page('http://todomvc.com/examples/angularjs/');
-
-test('add new item', async t => {
- await t
- .typeText(AngularJSSelector.byModel('newTodo'), 'new item')
- .pressKey('enter')
- .expect(Selector('#todo-list').visible).ok();
-});
-```
-
-To learn more, see the [angularJS-selector.md](https://github.com/DevExpress/testcafe-angular-selectors/blob/master/angularJS-selector.md) file in the plugin repository.
-
-### Angular v2+
-
Use the `AngularSelector` class to select DOM elements by the component name. Call it without parameters to get a root element. You can also search through the nested components or elements. In addition, you can obtain the component state.
```js
@@ -86,6 +64,27 @@ await t.expect(listAngular.testProp).eql(1);
To learn more, refer to the [plugin repository](https://github.com/DevExpress/testcafe-angular-selectors/blob/master/angular-selector.md).
+## AngularJS
+
+`AngularJSSelector` contains a set of static methods to search for an HTML element by the specified binding (`byModel`, `byBinding`, etc.).
+
+```js
+import { AngularJSSelector } from 'testcafe-angular-selectors';
+import { Selector } from 'testcafe';
+
+fixture `TestFixture`
+ .page('http://todomvc.com/examples/angularjs/');
+
+test('add new item', async t => {
+ await t
+ .typeText(AngularJSSelector.byModel('newTodo'), 'new item')
+ .pressKey('enter')
+ .expect(Selector('#todo-list').visible).ok();
+});
+```
+
+To learn more, refer to the [plugin repository](https://github.com/DevExpress/testcafe-angular-selectors/blob/master/angularJS-selector.md).
+
## Vue
Vue selectors allow you to pick DOM elements by the component name. You can also search through the nested components or elements. In addition, you can obtain the component props, state and computed props.
diff --git a/docs/articles/documentation/test-api/selecting-page-elements/selectors/README.md b/docs/articles/documentation/test-api/selecting-page-elements/selectors/README.md
index 2cbe9b12..b96f78dc 100644
--- a/docs/articles/documentation/test-api/selecting-page-elements/selectors/README.md
+++ b/docs/articles/documentation/test-api/selecting-page-elements/selectors/README.md
@@ -3,6 +3,8 @@ layout: docs
title: Selectors
permalink: /documentation/test-api/selecting-page-elements/selectors/
checked: false
+redirect_from:
+ - /documentation/test-api/selecting-page-elements/selectors.html
---
# Selectors
diff --git a/docs/articles/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.md b/docs/articles/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.md
index 6c8bf3bf..88986cb4 100644
--- a/docs/articles/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.md
+++ b/docs/articles/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.md
@@ -38,6 +38,14 @@ Method | Return Type | Description
------ | ----- | -----
`nth(index)` | Selector | Finds an element by its index in the matching set. The `index` parameter is zero-based. If `index` is negative, the index is counted from the end of the matching set.
+```js
+// Selects the third ul element.
+Selector('ul').nth(2);
+
+// Selects the last div element.
+Selector('div').nth(-1);
+```
+
### withText
Method | Type | Description
@@ -45,12 +53,50 @@ Method | Type | Description
`withText(text)` | Selector | Creates a selector that filters a matching set by the specified text. Selects elements that *contain* this text. To filter elements by *strict match*, use the `withExactText` method. The `text` parameter is case-sensitive.
`withText(re)` | Selector | Creates a selector that filters a matching set using the specified regular expression.
+```js
+// Selects label elements that contain 'foo'.
+// Matches 'foo', 'foobar'. Does not match 'bar', 'Foo'.
+Selector('label').withText('foo');
+
+// Selects div elements whose text matches
+// the /a[b-e]/ regular expression.
+// Matches 'ab', 'ac'. Does not match 'bb', 'aa'.
+Selector('div').withText(/a[b-e]/);
+```
+
+Note that when `withText` filters the matching set, it leaves not only the element that immediately contains the specified text but also its ancestors.
+
+Assume the following markup.
+
+```html
+
+
1 minute to set up
You do not need WebDriver or any other testing software. Install TestCafe with one command, and you are ready to test.
-npm install -g testcafe
+ npm install -g testcafeYou will need Node.js
+npm install -g testcafeYou can use any text editor
+import Page from './basic-page-model';
+
+fixture `My first fixture`
+ .page `http://devexpress.github.io/testcafe/example/`;
+
+const page = new Page();
+
+test('My first test', async t => {
+ await t
+ .typeText(page.nameInput, 'P.Parker')
+ .click(page.macOSRadioButton)
+ .click(page.featureList[0].checkbox)
+ .click(page.interfaceSelect)
+ .click(page.interfaceSelectOption.withText('Both'))
+ .expect(page.nameInput.value).contains('Peter');
+});Choose the browser, and launch the test with one command
+testcafe safari test-example.jsYou'll see the line where the test has failed and a code snippet
+
The TestCafe's Test API includes a high-level selector library, assertions, etc. You can combine them to implement readable tests with the PageObject pattern.
const el = Selector('.column').find('label')
.withText('MacOS').child('input');const el = Selector('.column')
+ .find('label')
+ .withText('MacOS')
+ .child('input');
Follow us on Twitter
+