codeceptjs 2.1.3 → 2.2.1

package/docs/helpers.md

@@ -24,22 +24,20 @@ codeceptjs gh
 
 This command generates a basic helper and appends it to `helpers` section of config file:
 
-```json
-"helpers": {
-  "WebDriver": {  },
-  "MyHelper": {
-    "require": "./path/to/module.js"
+```js
+helpers: {
+  WebDriver: {  },
+  MyHelper: {
+    require: './path/to/module'
   }
 }
 ```
 
 Helpers are ES6 classes inherited from [corresponding abstract class](https://github.com/Codeception/CodeceptJS/blob/master/lib/helper.js).
-Generated Helper will be added to `codecept.json` config. It should look like this:
+Generated Helper will be added to `codecept.conf.js` config. It should look like this:
 
 ```js
-'use strict';
-
-let Helper = codecept_helper;
+const Helper = codecept_helper;
 
 class MyHelper extends Helper {
 
@@ -79,11 +77,10 @@ Method `seeAuthentication` will use `client` instance of WebDriver to get access
 Standard NodeJS assertion library will be used (you can use any).
 
 ```js
-'use strict';
-let Helper = codecept_helper;
+const Helper = codecept_helper;
 
 // use any assertion library you like
-let assert = require('assert');
+const assert = require('assert');
 
 class MyHelper extends Helper {
   /**
@@ -111,6 +108,29 @@ class MyHelper extends Helper {
 module.exports = MyHelper;
 ```
 
+## Puppeteer Example
+
+Puppteer has [nice and elegant API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md) which you can use inside helpers. Access `page` instance via `this.helpers.Puppeteer.page` from inside a helper.
+
+Let's see how we can use [emulate](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions) function to emulate iPhone browser in a test.
+
+```js
+const Helper = codecept_helper;
+const puppeteer = require('puppeteer');
+const iPhone = puppeteer.devices['iPhone 6'];
+
+class MyHelper extends Helper {
+
+  async emulateIPhone() {
+    const { page } = this.helpers.Puppeteer;
+    await page.emulate(iPhone);
+  }
+
+}
+
+module.exports = MyHelper;
+```
+
 ## Protractor Example
 
 Protractor example demonstrates usage of global `element` and `by` objects.
@@ -118,14 +138,13 @@ However `browser` should be accessed from a helper instance via `this.helpers['P
 We also use `chai-as-promised` library to have nice assertions with promises.
 
 ```js
-'use strict';
-let Helper = codecept_helper;
+const Helper = codecept_helper;
 
 // use any assertion library you like
-var chai = require('chai');
-var chaiAsPromised = require('chai-as-promised');
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
 chai.use(chaiAsPromised);
-var expect = chai.expect;
+const expect = chai.expect;
 
 class MyHelper extends Helper {
   /**
@@ -136,7 +155,7 @@ class MyHelper extends Helper {
     this.helpers['Protractor'].browser.refresh();
 
     // you can use `element` as well as in protractor
-    var history = element.all(by.repeater('result in memory'));
+    const history = element.all(by.repeater('result in memory'));
 
     // use chai as promised for better assertions
     // end your method with `return` to handle promises

package/docs/locators.md

@@ -64,6 +64,8 @@ I.seeElement({ css: 'button' });
 I.seeElement({ xpath: 'descendant::table/tr' });
 ```
 
+> ℹ Use [Locator Advicer](https://davertmik.github.io/locator/) to check quality of your locators.
+
 ## Semantic Locators
 
 CodeceptJS can guess an element's locator from context.

package/docs/mobile-react-native-locators.md

@@ -0,0 +1,64 @@
+## Automating React Native apps
+
+### Problem
+Let's say we have a React Native app with component defined like this
+```html
+<Button testID='someButton'>My button</Button>
+```
+
+If you will try to execute a simple test like
+```js
+I.tap('~someButton')
+```
+it will work correctly on iOS (with XUITest driver), but on Android's UIAutomator2 it will give you an error
+```
+Touch actions like "tap" need at least some kind of position information like "element", "x" or "y" options, you've none given.
+```
+
+This happens because of the way React Native implements `testID` for Android, it puts provided value into the [View tag](https://developer.android.com/reference/android/view/View#tags),
+as could be found in the [source code](https://github.com/facebook/react-native/blob/19a88d7f4addcd9f95fd4908d50db37b3604b5b1/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java#L114).
+But UIAutomator doesn't have any means to work with view tags.
+
+### Solutions
+As many resources suggest (like [here](https://github.com/appium/appium/issues/6025#issuecomment-406141946) or [here](https://github.com/facebook/react-native/issues/7135)),
+you could use `testID` for iOS and `accesibilityLabel` for Android, but `accessibilityLabel` is a user-facing text that's intended for ... accesibility,
+not for UI tests, and you will need to switch it off for production builds.
+
+Another way to solve this issue is to use Espresso driver for Android.
+At first you need to enable Espresso driver for your Android configuration.
+You could do it just by changing `automationName` in the `helpers` section of the config file:
+```js
+{
+  //...
+  helpers: {
+    Appium: {
+      app: '/path/to/apk.apk',
+      platform: 'Android',
+      desiredCapabilities: {
+        automationName: 'Espresso',
+        platformVersion: '9',
+        deviceName: 'Android Emulator'
+      }
+    }
+  }
+  //...
+}
+```
+Then you could locate components using XPath expression:
+```js
+I.tap({android: '//*[@view-tag="someButton"]', ios: '~someButton'})
+```
+This way test would work for both platforms without any changes in code.
+To simplify things further you could write a helper function:
+```js
+function tid(id) {
+  return {
+    android: `//*[@view-tag="${id}"]`,
+    ios: '~' + id
+  }
+}
+```
+Now test will look more concise
+```js
+I.tap(tid('someButton'));
+```

package/docs/mobile.md

@@ -173,6 +173,8 @@ In both Android and iPhone elements are defined in XML format and can be searche
 I.seeElement('//android.widget.ScrollView/android.widget.LinearLayout')'
 ```
 
+> Despite showing XPath in this guide we **do not recommend using XPath for testing iOS native apps. XPath runs very slow on iOS. Consider using ID or Accessibility ID locators instead.
+
 CSS locators are not supported in native mobile apps, you need to switch to web context to use them.
 
 Elements can also be located by their accessability id, available both at Android and iOS.
@@ -181,6 +183,9 @@ Accessibility id is recommended to use for locating element, as it rarely change
 * iOS uses [UIAccessibilityIdentification](https://developer.apple.com/documentation/uikit/uiaccessibilityidentification)
 * Android `accessibility id` matches the content-description
 * Web view uses `[aria-label]` attribute as accessibility id
+* For [React Native for Android see our special guide](mobile-react-native-locators.md).
+
+> If you test React Native application, consider using [Detox helper](/detox) for faster tests.
 
 Add `~` prefix to search for element by its accessibility id:
 

package/docs/plugins.md

@@ -2,6 +2,7 @@
 id: plugins
 title: Plugins
 ---
+
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
 ## allure
@@ -54,6 +55,12 @@ const allure = codeceptjs.container.plugins('allure');
 
 -   `addAttachment(name, buffer, type)` - add an attachment to current test / suite
 -   `addLabel(name, value)` - adds a label to current test
+-   `severity(value)` - adds severity label
+-   `epic(value)` - adds epic label
+-   `feature(value)` - adds feature label
+-   `story(value)` - adds story label
+-   `issue(value)` - adds issue label
+-   `setDescription(description, type)` - sets a description
 
 ### Parameters
 
@@ -217,19 +224,21 @@ helpers: {
 },
 plugins: {
    autoLogin: {
-    admin: {
-      login: (I) => {
-         I.amOnPage('/login');
-         I.fillField('email', 'admin@site.com');
-         I.fillField('password', '123456');
-         I.click('Login');
-      }
-      check: (I) => {
-         I.amOnPage('/dashboard');
-         I.see('Admin', '.navbar');
-      },
-      fetch: () => {}, // empty function
-      restore: () => {}, // empty funciton
+     users: {
+       admin: {
+         login: (I) => {
+           I.amOnPage('/login');
+           I.fillField('email', 'admin@site.com');
+           I.fillField('password', '123456');
+           I.click('Login');
+         },
+         check: (I) => {
+           I.amOnPage('/dashboard');
+           I.see('Admin', '.navbar');
+         },
+         fetch: () => {}, // empty function
+         restore: () => {}, // empty funciton
+       }
     }
   }
 }
@@ -257,6 +266,38 @@ plugins: {
 }
 ```
 
+#### Tips: Using async function in the autoLogin
+
+If you use async functions in the autoLogin plugin, login function should be used with `await` keyword.
+
+```js
+autoLogin: {
+  enabled: true,
+  saveToFile: true,
+  inject: 'login',
+  users: {
+    admin: {
+      login: async (I) => {  // If you use async function in the autoLogin plugin
+         const phrase = await I.grabTextFrom('#phrase')
+         I.fillField('username', 'admin'),
+         I.fillField('password', 'password')
+         I.fillField('phrase', phrase)
+      },
+      check: (I) => {
+         I.amOnPage('/');
+         I.see('Admin');
+      }
+    }
+  }
+}
+```
+
+```js
+Scenario('login', async (I, login) => {
+  await login('admin') // you should use `await`
+})
+```
+
 ### Parameters
 
 -   `config`  

package/docs/puppeteer.md

@@ -3,8 +3,7 @@ id: puppeteer
 title: Testing with Puppeteer
 ---
 
-Among all Selenium alternatives the most interesting emerging ones are tools developed around Google Chrome [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). And the most prominent one is [Puppeteer](https://github.com/GoogleChrome/puppeteer).
-It operates over Google Chrome directly without requireing additional tools like ChromeDriver. So tests setup with Puppeteer can be started with npm install only. If you want get faster and simpler to setup tests, Puppeteer would be your choice.
+Among all Selenium alternatives the most interesting emerging ones are tools developed around Google Chrome [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). And the most prominent one is [Puppeteer](https://github.com/GoogleChrome/puppeteer). It operates over Google Chrome directly without requiring additional tools like ChromeDriver. So tests setup with Puppeteer can be started with npm install only. If you want get faster and simpler to setup tests, Puppeteer would be your choice.
 
 CodeceptJS uses Puppeteer to improve end to end testing experience. No need to learn the syntax of a new tool, all drivers in CodeceptJS share the same API.
 
@@ -27,47 +26,51 @@ It's readable and simple and works using Puppeteer API!
 To start you need CodeceptJS with Puppeteer packages installed
 
 ```bash
-npm install -g codeceptjs puppeteer
+npm install codeceptjs puppeteer --save
 ```
 
 Or see [alternative installation options](http://codecept.io/installation/)
-If you already have CodeceptJS project, just install `puppeteer` package and enable it in config.
+
+> If you already have CodeceptJS project, just install `puppeteer` package and enable a helper it in config.
 
 And a basic project initialized
 
 ```sh
-codeceptjs init
+npx codeceptjs init
 ```
 
 You will be asked for a Helper to use, you should select Puppeteer and provide url of a website you are testing.
 
+> Puppeteer can also work with Firefox. [Learn how to set it up](https://codecept.io/helpers/Puppeteer-firefox)
+
 ## Configuring
 
-Make sure `Puppeteer` helper is enabled in `codecept.json` config:
+Make sure `Puppeteer` helper is enabled in `codecept.conf.js` config:
 
 ```js
 { // ..
-  "helpers": {
-    "Puppeteer": {
-      "url": "http://localhost",
-      "show": false
+  helpers: {
+    Puppeteer: {
+      url: "http://localhost",
+      show: true
     }
   }
   // ..
 }
 ```
 
-Turn on the `show` option if you want to follow test progress in a window. This is very useful for debugging.
+> Turn off the `show` option if you want to run test in headless mode.
 
 Puppeteer uses different strategies to detect if a page is loaded. In configuration use `waitForNavigation` option for that:
 
 By default it is set to `domcontentloaded` which waits for `DOMContentLoaded` event being fired. However, for Single Page Applications it's more useful to set this value to `networkidle0` which waits for all network connections to be finished.
 
 ```js
-  "helpers": {
-    "Puppeteer": {
-      "url": "http://localhost",
-      "waitForNavigation": "networkidle0"
+  helpers: {
+    Puppeteer: {
+      url: "http://localhost",
+      show: true,
+      waitForNavigation: "networkidle0"
     }
   }
 ```
@@ -75,14 +78,14 @@ By default it is set to `domcontentloaded` which waits for `DOMContentLoaded` ev
 When a test runs faster than application it is recommended to increase `waitForAction` config value.
 It will wait for a small amount of time (100ms) by default after each user action is taken.
 
-*More options are listed in [helper reference](http://codecept.io/helpers/Puppeteer/).*
+> ▶ More options are listed in [helper reference](http://codecept.io/helpers/Puppeteer/).
 
 ## Writing Tests
 
 CodeceptJS test should be created with `gt` command:
 
 ```sh
-codeceptjs gt
+npx codeceptjs gt
 ```
 
 As an example we will use `ToDoMvc` app for testing.
@@ -100,9 +103,9 @@ Tests consist with a scenario of user's action taken on a page. The most widely
 * `see`, `dontSee` - to check for a text on a page
 * `seeElement`, `dontSeeElement` - to check for elements on a page
 
-*All actions are listed in [helper reference](http://codecept.io/helpers/Puppeteer/).*
+> ℹ  All actions are listed in [Puppeteer helper reference](http://codecept.io/helpers/Puppeteer/).*
 
-All actions whicn interact with elements **support CSS and XPath locators**. Actions like `click` or `fillField` by locate elements by their name or value on a page:
+All actions which interact with elements **support CSS and XPath locators**. Actions like `click` or `fillField` by locate elements by their name or value on a page:
 
 ```js
 
@@ -153,7 +156,7 @@ Scenario('get value of current tasks', async (I) => {
 
 ### Within
 
-In case some actions should be taken inside one element (a container or modal window) you can use `within` block to narrow the scope.
+In case some actions should be taken inside one element (a container or modal window or iframe) you can use `within` block to narrow the scope.
 Please take a note that you can't use within inside another within in Puppeteer helper:
 
 ```js
@@ -165,15 +168,58 @@ within('.todoapp', () => {
 I.see('0 items left', '.todo-count');
 ```
 
+> [▶ Learn more about basic commands](https://codecept.io/basics#writing-tests)
+
 CodeceptJS allows you to implement custom actions like `I.createTodo` or use **PageObjects**. Learn how to improve your tests in [PageObjects](http://codecept.io/pageobjects/) guide.
 
-`within` can also work with [iframes](/acceptance/#iframes)
+> [▶ Demo project is available on GitHub](https://github.com/DavertMik/codeceptjs-todomvc-puppeteer)
+
+## Mocking Requests
+
+Web application sends various requests to local services (Rest API, GraphQL) or to 3rd party services (CDNS, Google Analytics, etc).
+When you run tests with Puppeteer you can control those requests by mocking them. For instance, you can speed up your tests by blocking trackers, Google Analytics, and other services you don't control.
+
+Also you can replace real request with a one explicitly defined. This is useful when you want to isolate application testing from a backend. For instance, if you don't want to save data to database, and you know the request which performs save, you can mock the request, so application will treat this as valid response, but no data will be actually saved.
 
-When running steps inside a within block will be shown with a shift.
+To mock requests enable additional helper [Polly](https://codecept.io/helpers/Polly) (which is based on Polly.js).
 
-![within](https://codecept.io/img/within.png)
+```js
+helpers: {
+   Puppeteer: {
+     // regular Puppeteer config here
+   },
+   Polly: {}
+}
+```
 
-> [Demo project is available on GitHub](https://github.com/DavertMik/codeceptjs-todomvc-puppeteer)
+And install additional packages:
+
+```
+npm i @pollyjs/core @pollyjs/adapter-puppeteer --save-dev
+```
+
+After an installation function `mockRequest` will be added to `I` object. You can use it to explicitly define which requests to block and which response they should return instead:
+
+```js
+// block all Google Analytics calls
+I.mockRequest('/google-analytics/*path', 200);
+// return an empty successful response
+I.mockRequest('GET', '/api/users', 200);
+// block post requests to /api/users and return predefined object
+I.mockRequest('POST', '/api/users', { user: 'davert' });
+// return error request with body
+I.mockRequest('GET', '/api/users/1', 404, { error: 'User not found' });
+```
+
+> See [`mockRequest` API](https://codecept.io/helpers/Polly#mockrequest)
+
+To see `mockRequest` method in intellisense auto completion don't forget to run `codeceptjs def` command:
+
+```
+npx codeceptjs def
+```
+
+Mocking rules will be kept while a test is running. To stop mocking use `I.stopMocking()` command
 
 ## Extending
 
@@ -182,7 +228,7 @@ Puppeteer has a very [rich and flexible API](https://github.com/GoogleChrome/pup
 Start with creating an `MyPuppeteer` helper using `generate:helper` or `gh` command:
 
 ```sh
-codeceptjs gh
+npx codeceptjs gh
 ```
 
 Then inside a Helper you can access `Puppeteer` helper of CodeceptJS.
@@ -197,5 +243,7 @@ async renderPageToPdf() {
 }
 ```
 
-The same way you can also access `browser` object to implement more actions or handle events. [Learn more about Helpers](http://codecept.io/helpers/) in the corresponding guide.
+The same way you can also access `browser` object to implement more actions or handle events.
+
+> [▶ Learn more about Helpers](http://codecept.io/helpers/)
 

package/docs/quickstart.md

@@ -4,18 +4,42 @@ title: Quickstart
 ---
 
 **NodeJS v 8.9** and higher required to start.
-CodeceptJS is multi-backend testing framework. It can execute tests using different libraries like webdriverio, Puppeteer, Protractor, etc.
+CodeceptJS is an end 2 end testing framework which supports multiple browser drivers like WebDriver, Puppeteer, Protractor, TestCafe etc.
 
-* In this guide we will use [Google Chrome **Puppeteer**](https://github.com/GoogleChrome/puppeteer) as a driver for browsers. This allows us to start in a minutes with no extra tools installed.
-* If you are familiar with Selenium, you can choose classical [**Selenium WebDriver** setup](#using-selenium-webdriver).
-* Also, look at [complete installation reference](https://codecept.io/installation/).
+> **⬇️ TLDR [Fastest and simplest setup with Puppeteer and CodeceptJS](#using-puppeteer) ⬇️**
 
+How to choose the right driver for your web application?
+Here is a brief comparison of all tools you can use with CodeceptJS.
+
+
+| Driver  | Cross-Browser | Limitations | Headless | Selenuim | Speed |
+|---|---|---|--|--|--|
+| WebDriver  | ✔️ | headers, downloads | ⁉ | ✔️ | normal |
+| Puppeteer  | chrome | cross-browser support | ✔️ | | fast |
+| Protractor | ✔️ | headers, downloads | ⁉ | ✔️ | normal |
+| TestCafe | ✔️  | multiple tabs | ✔️ | | fast |
+| Nightmare | electron (chromium) | multiple tabs, cross-browser  | ✔️ | | fast |
+
+⁉ - headless mode requires additional tools and configuration.
+
+#### How to choose browser driver
+
+* **[Choose Puppeteer](#Using-Puppeteer)** for simplest setup, fast tests, full browser control. Limited to Chrome and Firefox only. Cloud browsers via browserless.io.
+* **[Choose WebDriver](#Using-WebDriver)** or Protractor for classical Selenium. Rich ecosystem and cross browser support with cloud browsers via Sauce Labs, BrowserStack, TestingBot. **Selenium server requried** for local start.
+* **[Choose TestCafe](#Using-TestCafe)** for cheap and fast cross-browser tests. Has stability and feature limitation comparing to WebDriver.
+
+Each driver has its own pros and cons which can't be described in this paragraph. However, in CodeceptJS it is easy to switch between them. In most cases you just need to update a config to run tests differently.
 
 ## Using Puppeteer
 
 
 <video onclick="this.paused ? this.play() : this.pause();" src="/img/codeceptjs-install.mp4" style="width: 100%" controls></video>
 
+0) If you start an empty project, initialize npm first:
+
+```
+npm init -y
+```
 
 1) Install CodeceptJS with Puppeteer
 
@@ -102,17 +126,24 @@ Puppeteer starts a browser without showing its window. To see the browser, edit
 
 Rerun the test to see the browser.
 
-> Next: [CodeceptJS with Puppeteer >>>](https://codecept.io/puppeteer/)
+> [▶ Next: CodeceptJS Basics](https://codecept.io/basics/)
+
+> [▶ Next: CodeceptJS with Puppeteer](https://codecept.io/puppeteer/)
 
-> Next: [CodeceptJS Basics >>>](https://codecept.io/basics/)
 
-> Next: [Demo Project](https://github.com/DavertMik/codeceptjs-todomvc-puppeteer)
 
 
 ---
 
 ## Using Selenium WebDriver
 
+0) If you start an empty project, initialize npm first:
+
+```
+npm init -y
+```
+
+
 1) Install CodeceptJS with webdriverio library
 
 ```
@@ -209,19 +240,23 @@ My First Test --
 ```
 
 
-> Next: [CodeceptJS Basics >>>](https://codecept.io/basics/)
+> [▶ Next: CodeceptJS Basics](https://codecept.io/basics/)
 
-> Next: [Acceptance Testing in CodeceptJS >>>](https://codecept.io/acceptance/)
+> [▶ Next: WebDriver Testing](https://codecept.io/webdriver/)
 
 
 ## Using Protractor
 
-> [**Follow corresponding guide >>**](https://codecept.io/angular/)
+> [▶ Follow corresponding guide](https://codecept.io/angular/)
 
 ## Using Appium
 
-> [**Follow corresponding guide >>**](https://codecept.io/mobile/)
+> [▶ Follow corresponding guide](https://codecept.io/mobile/)
 
 ## Using NightmareJS
 
-> [**Follow corresponding guide >>**](https://codecept.io/nightmare/)
+> [▶ Follow corresponding guide](https://codecept.io/nightmare/)
+
+## Using TestCafe
+
+> [▶ Follow corresponding guide](https://codecept.io/testcafe/)

package/docs/react.md

@@ -0,0 +1,67 @@
+---
+id: react
+title: Testing React Applications
+---
+
+React applications require some additional love for end to end testing.
+At first, it is very hard to test an application which was never designed to be tested!
+This happens to many React application. While building components developers often forget to keep the element's semantic.
+
+Generated HTML code may often look like this:
+
+```js
+<div class="jss607 jss869 jss618 jss871 jss874 jss876" tabindex="0" role="tab" aria-selected="true" style="pointer-events: auto;">
+  <span class="jss877">
+    <span class="jss878">
+      <span class="jss879">Click Me!</span>
+    </span>
+  </span>
+<span class="jss610"></span></div>
+```
+
+It's quite common that clickable elements are not actual `a` or `button` elements. This way `I.click('Click Me!');` won't work, as well as `fillField('name', 'value)`. Finding a correct locator for such cases turns to be almost impossible.
+
+In this case test engineers have two options:
+
+1. Update JSX files to change output HTML and rebuild the application
+1. Test the application how it is.
+
+We recommend for long-running projects to go with the first option. The better you write your initial HTML the cleaner and less fragile will be your tests. Replace divs with correct HTML elements, add `data-` attributes, add labels, and names to input fields to make all CodeceptJS magic like clicking link by a text to work.
+
+However, if you can't update the code you can go to the second option. In this case, you should bind your locators to visible text on page and available semantic attribues. For instance, instead of using generated locator as this one:
+
+```
+//*[@id="document"]/div[2]/div/div[2]/div
+```
+
+use [Locator Builder](https://codecept.io/locators#locator-builder) to make clean semantic locator:
+
+```js
+locate('[role=tab]').withText('Click Me!');
+```
+
+This way you can build very flexible and stable locators even on application never designed for testing.
+
+## Locators
+
+For React apps a special `react` locator is available. It allows to select an element by its component name, props and state.
+
+```js
+{ react: 'MyComponent' }
+{ react: 'Button', props: { title: 'Click Me' }}
+{ react: 'Button', state: { some: 'state' }}
+{ react: 'Input', state: 'valid'}
+```
+
+In WebDriver and Puppeteer you can use React locators in any method where locator is required:
+
+```js
+I.click({ react: 'Tab', props: { title: 'Click Me!' }});
+I.seeElement({ react: 't', props: { title: 'Clicked' }});
+```
+
+To find React element names and props in a tree use [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) extension.
+
+> Turn off minifcation for application builds otherwise component names will be uglified as well
+
+React locators work via [resq](https://github.com/baruchvlz/resq) library, which handles React 16 and above.

package/docs/reports.md

@@ -1,5 +1,5 @@
 ---
-id: reporters
+id: reports
 title: Reporters
 ---
 

package/docs/shared/react.mustache

@@ -0,0 +1 @@
+This action supports [React locators](https://codecept.io/react#locators)