diff --git a/docs/docs/api/components/qawolf/ArgumentRepl.js b/docs/docs/api/components/qawolf/ArgumentRepl.js index 40350e356..360ff630d 100644 --- a/docs/docs/api/components/qawolf/ArgumentRepl.js +++ b/docs/docs/api/components/qawolf/ArgumentRepl.js @@ -8,10 +8,10 @@ function ArgumentRepl() { description={ Pass variables you want to access in the REPL. Includes the{' '} - - Playwright Browser + + Playwright BrowserContext {' '} - instance by default. + instance and qawolf module by default. } name="context" diff --git a/docs/docs/api/qawolf/repl.mdx b/docs/docs/api/qawolf/repl.mdx index 73af3e638..2472cae7c 100644 --- a/docs/docs/api/qawolf/repl.mdx +++ b/docs/docs/api/qawolf/repl.mdx @@ -26,7 +26,7 @@ Pause a running test or script and open the [interactive REPL](../../use_the_rep ### Examples -Call `repl` in your test code, passing whatever values you want to access in the REPL. The [Playwright `Browser`](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browser) instance (`browser`) is included by default, so you do not need to include it again: +Call `repl` in your test code, passing whatever values you want to access in the REPL. The [Playwright `BrowserContext`](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext) instance (`context`) and `qawolf` are included by default, so you do not need to include them again: ```js const qawolf = require('qawolf'); @@ -34,7 +34,7 @@ const selectors = require('../selectors/myTestName.json'); // ... test('myTestName', async () => { - await qawolf.repl({ selectors }); // already includes browser + await qawolf.repl({ selectors }); // already includes qawolf and context }); ``` diff --git a/docs/docs/use_the_repl.md b/docs/docs/use_the_repl.md index 4c20be9bf..d4c4f1a5c 100644 --- a/docs/docs/use_the_repl.md +++ b/docs/docs/use_the_repl.md @@ -3,7 +3,7 @@ id: use_the_repl title: šŸ” Use the REPL --- -As you create a test, you may want to try out code to include in your test file. The interactive [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) lets you run [Node.js](https://nodejs.org/en) code and gives you access to the [QA Wolf API](api/table_of_contents). +As you create a test, you may want to try out code to include in your test file. The interactive [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) lets you run [Node.js](https://nodejs.org/en) code. It also gives you access to the [QA Wolf API](api/table_of_contents) and [Playwright API](https://github.com/microsoft/playwright/blob/master/docs/api.md). ## TL;DR @@ -24,49 +24,36 @@ Use the up and down arrow keys to choose between options. To open the REPL, choo ## Run code in the REPL -You will now be able to run [Node.js](https://nodejs.org/en) in the command line, as well as access the [QA Wolf API](api/table_of_contents). +You will now be able to run [Node.js](https://nodejs.org/en) in the command line, as well as access the [QA Wolf API](api/table_of_contents) and [Playwright API](https://github.com/microsoft/playwright/blob/master/docs/api.md). Type `1 + 1` in the REPL and press `Enter`. The result `2` will print below the command. In short, any code you could run in the [Node.js](https://nodejs.org/en) REPL can also be run here. -You can also use the [QA Wolf API](api/table_of_contents) in the REPL. For example, let's say we have just started to create a test on [TodoMVC](http://todomvc.com/examples/react). We can create a todo item through the REPL. - -First, let's type in the `input` with the class `"new-todo"` and then press `Enter` to save our todo. To do this, we will call the [`browser.type` method](api/browser_context/type). In the REPL, type: +You can also use the [QA Wolf API](api/table_of_contents) in the REPL. By default, the REPL provides access to the [Playwright `BrowserContext`](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext) instance (`context`) and `qawolf`. For example, let's get the [Playwright `Page`](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-page) instance with index `0` using the [`qawolf.waitForPage` method](api/qawolf/wait_for_page): ```js -await browser.type({ css: "input.new-todo" }, "Hello from the REPL!"); -await browser.type({ css: "input.new-todo" }, "ā†“Enterā†‘Enter"); +let page = await qawolf.waitForPage(context, 0); ``` -You will see a todo item called `"Hello from the REPL!"` created in the browser. +Now let's say we have just started to create a test on [TodoMVC](http://todomvc.com/examples/react). We can create a todo item from the REPL. -We can then click to complete our todo item, using the [`browser.click` method](api/browser_context/click). In TodoMVC, you complete a todo by clicking on the `input` with the class `"toggle"`: +We can type in the `input` with the class `"new-todo"` using [Playwright's `page.type` method](https://github.com/microsoft/playwright/blob/master/docs/api.md#pagetypeselector-text-options). In the REPL, type: ```js -await browser.click({ css: "input.toggle" }); +await page.type('input.new-todo', 'Hello from the REPL!'); ``` -You should see the todo item be marked as complete in the browser. - -Now let's try out an assertion using the [`browser.hasText` method](api/browser_context/has_text). We'll verify that the text `"Clear completed"` now appears since we have completed a todo: +We can save our todo item with [Playwright's `page.press`](https://github.com/microsoft/playwright/blob/master/docs/api.md#pagepressselector-key-options) method. In the REPL, type the following to press `Enter`: ```js -await browser.hasText("Clear completed"); +await page.press('input.new-todo', 'Enter'); ``` -The result of this command should be `true`, as the text `"Clear completed"` is on the page. - -QA Wolf is built on top of [Microsoft's Playwright](https://github.com/microsoft/playwright), which has a [rich API](https://github.com/microsoft/playwright/blob/master/docs/api.md) that you can use. The methods on the [`Page` class](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-page) can be particularly helpful. - -Let's get the current Playwright `Page` instance using the [`browser.page` method](api/browser_context/page): +You should see a todo item called `"Hello from the REPL!"` created in the browser. -```js -const page = await browser.page(); -``` - -We can now call Playwright's [`page.$$eval` method](https://github.com/microsoft/playwright/blob/master/docs/api.md#pageevalselector-pagefunction-args) to get the current count of todo items. These items are stored as `li` elements under the `ul` with the class `"todo-items"`: +Now let's get the current count of todo items on the page using Playwright's [`page.$$eval` method](https://github.com/microsoft/playwright/blob/master/docs/api.md#pageevalselector-pagefunction-args). The todo items are stored as `li` elements under the `ul` with the class `"todo-items"`: ```js -await page.$$eval(".todo-list li", todos => todos.length); +await page.$$eval('.todo-list li', todos => todos.length); ``` The result of this command should be `1`, as we currently have one todo item on the page. @@ -81,36 +68,19 @@ When you are done using the REPL, type `.exit` in the command line. This will cl You can also open the REPL when running a test. The [`repl` method](api/qawolf/repl) allows you to use the REPL to debug existing tests. -First, update your code to call the `repl` method where you want the test to pause and open a REPL. Import `repl` from `qawolf` at the beginning of your test: - -```js -// change this -const { launch } = require("qawolf"); -// to this -const { launch, repl } = require("qawolf"); -``` - -Then call `repl` any number of times in your test code. Pass whatever values you want access to in the REPL. The `browser` is passed by default, so you do not need to include it: +Call `qawolf.repl` any number of times in your test code, passing whatever values you want to be able to access. The `context` and `qawolf` are passed by default, so you do not need to include them again: ```js -it("can click button", async () => { - await repl({ selectors }); // already includes browser +const qawolf = require('qawolf'); +const selectors = require('../selectors/myTestName.json'); +// ... - await browser.click(selectors[2]); +test('signIn', async () => { + await qawolf.repl({ selectors }); // already includes context and qawolf }); ``` -Run your test with the [`--repl` flag](api/cli#npx-qawolf-test-name). When the test encounters a `repl` call, it will pause and the REPL will open. You can then run various commands in the REPL. For example, you may want to try out a new selector: - -```bash -await browser.find({ css: "#new-id" }); -``` - -The REPL will have access to whatever context you gave it. For example, you can access `selectors` if you included `selectors` when calling `repl`: - -```bash -await browser.find(selectors[11]) -``` +Run your test with the [`qawolf test` command](api/cli#npx-qawolf-test-name). When the test encounters a `repl` call, it will pause and the REPL will open. The REPL will have access to whatever context you gave it. For example, you can access `selectors` if you included `selectors` when calling `repl`. After you are done using the REPL, type `.exit` to continue running your test. Your test will proceed until it encounters another `repl` call or finishes running.