Skip to content

Commit

Permalink
Merge pull request #730 from qawolf/update-dependencies
Browse files Browse the repository at this point in the history
chore: update dependencies
  • Loading branch information
jperl committed Jul 7, 2020
2 parents 8980953 + 6ab6b4a commit fa31802
Show file tree
Hide file tree
Showing 10 changed files with 2,764 additions and 1,096 deletions.
2 changes: 1 addition & 1 deletion docs/docs/api/table_of_contents.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ title: API Table of Contents
<br/>
<br/>

In addition to the APIs below, you have full access to the [Playwright API](https://github.com/microsoft/playwright/blob/master/docs/api.md), the [Jest API](https://jestjs.io/docs/en/expect), and [expect-playwright API](https://github.com/playwright-community/expect-playwright#api-documentation).
In addition to the APIs below, you have full access to the [Playwright API](https://github.com/microsoft/playwright/blob/master/docs/api.md) and the [Jest API](https://jestjs.io/docs/en/expect).

The QA Wolf API is minimal by design, since we want to leverage the power of Playwright/Jest as much as possible.

Expand Down
63 changes: 1 addition & 62 deletions docs/docs/create_a_test.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,6 @@ npx qawolf create http://todomvc.com/examples/react myTest

- [Edit as you go](#edit-as-you-go) in your code editor (`.qawolf/myTest.test.js`)

- [Add assertions](#optional-add-assertions) with the [expect-playwright](https://github.com/playwright-community/expect-playwright) library (included with QA Wolf):

```js
await expect(page).toHaveText('Clear completed');
await expect(page).toHaveSelector('.clear-completed');
```

- [Save your test](#save-a-test) by choosing `💾 Save and Exit` in the command line

:::
Expand Down Expand Up @@ -124,61 +117,7 @@ The test code is created in real-time, so you can edit the test as you create it

:::

## Optional: Add assertions

Let's add assertions to our test.

We recommend adding assertions with the [expect-playwright library](https://github.com/playwright-community/expect-playwright), which automatically waits for assertions. QA Wolf includes this library by default, so you do not need to install anything to use it.

### Assert that text appears

The first assertion we will add is to check that the text `"Clear completed"` appears after we complete our todo. Specifically, we will call expect-playwright's [`toHaveText` method](https://github.com/playwright-community/expect-playwright#tohavetext) to verify that the text appears on the page.

In our test code, let's add a line to assert that the text `"Clear completed"` appears on the page:

```js
// ...

test('myTest', async () => {
await page.goto('http://todomvc.com/examples/react');
await page.click('[placeholder="What needs to be done?"]');
await page.type('[placeholder="What needs to be done?"]', 'create test!');
await page.press('[placeholder="What needs to be done?"]', 'Enter');
await page.click('.toggle');
// custom code starts
await expect(page).toHaveText('Clear completed');
// custom code ends
await page.click('text=Clear completed');
});
```

### Assert that an element appears

Rather than asserting that the text `"Clear completed"` appears on the page, we could instead assert that the `"Clear completed"` button appears on the page.

In terms of the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), this means that there should be an element with the class `"clear-completed"`. The corresponding [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for an element with the class `"clear-completed"` is `.clear-completed`.

We'll use the [`toHaveSelector` method](https://github.com/playwright-community/expect-playwright#toHaveSelector) to assert that the CSS selector `.clear-completed` appears on the page after we complete our todo.

Our test now looks like this:

```js
// ...

test('myTest', async () => {
await page.goto('http://todomvc.com/examples/react');
await page.click('[placeholder="What needs to be done?"]');
await page.type('[placeholder="What needs to be done?"]', 'create test!');
await page.press('[placeholder="What needs to be done?"]', 'Enter');
await page.click('.toggle');
// custom code starts
await expect(page).toHaveSelector('.clear-completed');
// custom code ends
await page.click('text=Clear completed');
});
```

If the `"Clear completed"` button does not appear on the page, our test will fail.
You can edit this file with assertions. To learn about assertions, see Playwright's [documentation](https://playwright.dev/#version=v1.2.0&path=docs%2Fassertions.md&q=custom-assertions).

## Save a test

Expand Down
3 changes: 0 additions & 3 deletions expect-playwright.js

This file was deleted.

1 change: 0 additions & 1 deletion js-jest.config.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
{
"setupFilesAfterEnv": ["qawolf/expect-playwright"],
"transform": {}
}

0 comments on commit fa31802

Please sign in to comment.