Add Selenium WebDriverJS recipe

Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com> Co-authored-by: Mark Wubben <mark@novemberborn.net>
avajs · Jan 12, 2020 · 82cef5c · 82cef5c
1 parent 090884b
commit 82cef5c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/docs/recipes/testing-with-selenium-webdriverjs.md b/docs/recipes/testing-with-selenium-webdriverjs.md
@@ -0,0 +1,99 @@
+# Setting up AVA with Selenium WebDriverJS
+
+This recipe shows you how to use the Selenium WebDriverJS (official JavaScript implementation) with AVA to test web apps.
+
+## Setup
+
+This recipe uses the following packages:
+
+1. [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)
+2. [chromedriver](https://www.npmjs.com/package/chromedriver)
+
+Install them with:
+
+```console
+$ npm install selenium-webdriver chromedriver
+```
+
+As part of this recipe, we will use Selenium to verify web searches on [Bing](https://www.bing.com) and [Google](https://www.google.com).
+
+Create the following files:
+
+- `./test/bingtest.js`
+- `./test/googletest.js`
+
+In both files, let's first include the packages:
+
+```js
+const test = require('ava');
+const {Builder, By, Key, until} = require('selenium-webdriver');
+
+require('chromedriver');
+```
+
+In the `bingtest.js` file, add the following code, which tests whether searching for `webdriver` on Bing, returns results.
+
+```js
+test('Bing Search', async t => {
+	const keyword = 'webdriver';
+	const driver = new Builder().forBrowser('chrome').build();
+	await driver.get('https://www.bing.com');
+	await driver.findElement(By.name('q')).sendKeys(keyword + Key.ENTER);
+	await driver.wait(until.titleIs(keyword + ' - Bing'));
+	t.true((await driver.findElements(By.css('#b_content #b_results li'))).length > 0);
+	await driver.close();
+});
+```
+
+In the `googletest.js` file, instead of a single test, lets add two tests, one each for the terms 'webdriver' and 'avajs'.
+
+Since we would like to initialize the webdriver before each test, we use the [`beforeEach` and `afterEach`](../01-writing-tests.md#before--after-hooks) hooks to setup and teardown the driver respectively. Using these hooks, helps reduce the amount of code we would write in each `test()`.
+
+```js
+test.beforeEach(async t => {
+	t.context.driver = new Builder().forBrowser('chrome').build();
+	await t.context.driver.get('https://www.google.com');
+});
+
+test.afterEach('cleanup', async t => {
+	await t.context.driver.close();
+});
+```
+
+Now lets add the test code:
+
+```js
+async function searchGoogle(driver, keyword) {
+	await driver.findElement(By.name('q')).sendKeys(keyword + Key.ENTER);
+	await driver.wait(until.titleIs(`${keyword} - Google Search`));
+}
+
+test('Google Search for avajs', async t => {
+	const {driver} = t.context;
+	await searchGoogle(driver, 'avajs');
+	t.true((await driver.findElement(By.id('resultStats')).getText()).includes('results'));
+});
+
+test('Google Search for webdriver', async t => {
+	const {driver} = t.context;
+	await searchGoogle(driver, 'webdriver');
+	t.true((await driver.findElement(By.id('resultStats')).getText()).includes('results'));
+});
+```
+
+You're now ready to run the tests. The output should look something like this:
+
+```console
+npx ava
+DevTools listening on ws://127.0.0.1:49720/devtools/browser/9ebf4394-447b-4916-91cc-692d06d88896
+
+DevTools listening on ws://127.0.0.1:49756/devtools/browser/6e19d9fe-4de6-40a3-b120-17067b3125ca
+
+DevTools listening on ws://127.0.0.1:49757/devtools/browser/ac12c2da-eeed-40d8-9b23-4d2103ec8fac
+
+  bingtest » Bing Search (7.2s)
+  googletest » Google Search for avajs (2.5s)
+  googletest » Google Search for webdriver (3.3s)
+
+  3 tests passed
+```
diff --git a/readme.md b/readme.md
@@ -162,6 +162,7 @@ We have a growing list of [common pitfalls](docs/08-common-pitfalls.md) you may
 - [Debugging tests with WebStorm](docs/recipes/debugging-with-webstorm.md)
 - [Isolated MongoDB integration tests](docs/recipes/isolated-mongodb-integration-tests.md)
 - [Testing web apps using Puppeteer](docs/recipes/puppeteer.md)
+- [Testing web apps using Selenium WebDriverJS](docs/recipes/testing-with-selenium-webdriverjs.md)
 
 ## FAQ