diff --git a/docs/docs/api/environment_variables.md b/docs/docs/api/environment_variables.md
index 9eb5e9ec7..8aa5a8399 100644
--- a/docs/docs/api/environment_variables.md
+++ b/docs/docs/api/environment_variables.md
@@ -61,7 +61,7 @@ Click on this element:
The generated code will be:
```js
-await browser.click({ css: "[my-attribute='search']" });
+await page.click("[my-attribute='search']");
```
## QAW_BROWSER
diff --git a/docs/docs/use_custom_selectors.md b/docs/docs/use_custom_selectors.md
index ab023020a..9b865c352 100644
--- a/docs/docs/use_custom_selectors.md
+++ b/docs/docs/use_custom_selectors.md
@@ -10,24 +10,24 @@ In this guide, we explain how QA Wolf generates element selectors and how you ca
- [Element selectors in generated code](#selectors-overview) use attributes specified by [`QAW_ATTRIBUTE`](api/environment_variables#qaw_attribute) if possible, and multiple attributes otherwise:
```js
-it('can click "Submit" button', async () => {
- // if 1) data-qa exists on element and 2) QAW_ATTRIBUTE includes data-qa
- await browser.click({ css: "[data-qa='submit']" });
- // otherwise selector object captures all attributes of element
- await browser.click(selectors[0]);
+test('myTestName', async () => {
+ // CSS selector for test attribute if available
+ await page.click('[data-qa="submit"]');
+ // fallback
+ await page.click(selectors['0_what_needs_to_b_input']);
});
```
-- You can [edit the generated selectors](#edit-generated-selectors) to target elements based on [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or text content:
+- You can [edit the generated selectors](#edit-generated-selectors) to target elements based on [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or text selectors:
```js
-it('can click "Submit" button', async () => {
+test('myTestName', async () => {
// change this
- await browser.click(selectors[0]);
+ await page.click(selectors['0_what_needs_to_b_input']);
// to this (CSS selector)
- await browser.click({ css: "#submit" });
+ await page.click('#submit');
// or this (text selector)
- await browser.click({ text: "Submit" });
+ await page.click('text="Submit"');
});
```
@@ -39,7 +39,7 @@ When you create a test with QA Wolf, each action you take (like clicking and typ
### Target attributes
-During test creation, when you click on an element QA Wolf first checks to see if it has any [attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) specified by the [`QAW_ATTRIBUTE` environment variable](api/environment_variables#qaw_attribute). The default value of `QAW_ATTRIBUTE` is `data-cy,data-e2e,data-qa,data-test,data-testid`. This means that if an element has the `data-cy`, `data-e2e`, `data-qa`, `data-test`, or `data-testid` attribute, the generated code will target the element based on that attribute.
+During test creation, when you click on an element QA Wolf first checks to see if it has any [attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) specified by the [`QAW_ATTRIBUTE` environment variable](api/environment_variables#qaw_attribute). The default value of `QAW_ATTRIBUTE` is `data-cy,data-e2e,data-qa,data-test,data-testid,/^qa-.*/`. This means that if an element has the `data-cy`, `data-e2e`, `data-qa`, `data-test`, or `data-testid` attribute, the generated code will target the element based on that attribute. It will also target attributes that match the [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) `/^qa-.*/`.
For example, if you click on an element with the following [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML):
@@ -50,20 +50,18 @@ For example, if you click on an element with the following [HTML](https://develo
The generated test code will target the element with the [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) `[data-qa='submit']`:
```js
-it('can click "Submit" button', async () => {
- await browser.click({ css: "[data-qa='submit']" });
-});
+await page.click('[data-qa="submit"]');
```
-When you run your test, QA Wolf will look for an element where the `data-qa` attribute is set to `"submit"`. If it cannot find an element where `data-qa` equals `"submit"` before timing out, the test fails.
+When you run your test, [Playwright](https://github.com/microsoft/playwright) will look for an element where the `data-qa` attribute is set to `"submit"`. If it cannot find an element where `data-qa` equals `"submit"` before timing out, the test fails.
-You can [set the value of `QAW_ATTRIBUTE`](api/environment_variables#qaw_attribute) to choose what attributes QA Wolf uses when generating test code. You can specify any number of test attributes like `data-qa`, and other attributes like `id` and `aria-label`.
+You can [set the value of `QAW_ATTRIBUTE`](api/environment_variables#qaw_attribute) to choose what attributes QA Wolf uses when generating test code. You can specify any number of test attributes like `data-qa`, [regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) like `/^qa-.*/`, and other attributes like `id` and `aria-label`.
QA Wolf does its best to generate the correct CSS selector, even if the specified attribute is on an ancestor of the target element. For example, some component libraries like [Material UI](https://material-ui.com) place data attributes on a wrapper `div` around inputs. Your front end code might look like this:
```js
-import React from "react";
-import TextField from "@material-ui/core/TextField";
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
function MyTextInput() {
return