docs: update docs to use named import and create example.js (#741)

* docs: update docs to use named import and create example.js

* remove

* Update packages/playwright/example.js

Co-authored-by: Gabe <41127686+Zidious@users.noreply.github.com>

* Update packages/playwright/example.js

Co-authored-by: Gabe <41127686+Zidious@users.noreply.github.com>

* readme updates

---------

Co-authored-by: Gabe <41127686+Zidious@users.noreply.github.com>

packages/playwright/README.md

@@ -6,33 +6,9 @@
 
 Install [Node.js](https://docs.npmjs.com/getting-started/installing-node) if you haven't already.
 
-Install Playwright:
+Install Playwright: `npm install playwright`
 
-NPM:
-
-```console
-npm install playwright
-```
-
-Yarn:
-
-```console
-yarn add playwright
-```
-
-Install `@axe-core/playwright` and its dependencies:
-
-NPM:
-
-```console
-npm install @axe-core/playwright
-```
-
-Yarn:
-
-```console
-yarn add @axe-core/playwright
-```
+Install @axe-core/playwright: `npm install @axe-core/playwright`
 
 ## Usage
 
@@ -41,11 +17,11 @@ This module uses a chainable API to assist in injecting, configuring, and analyz
 Here is an example of a script that will drive Playwright to a page, perform an analysis, and then log results to the console.
 
 ```js
-const AxeBuilder = require('@axe-core/playwright').default;
+const { AxeBuilder } = require('@axe-core/playwright');
 const playwright = require('playwright');
 
 (async () => {
-  const browser = await playwright.chromium.launch();
+  const browser = await playwright.chromium.launch({ headless: true });
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto('https://dequeuniversity.com/demo/mars/');
@@ -56,6 +32,7 @@ const playwright = require('playwright');
   } catch (e) {
     // do something with the error
   }
+
   await browser.close();
 })();
 ```

packages/playwright/example.js

@@ -1,12 +1,18 @@
-const AxeBuilder = require('@axe-core/playwright').default;
+const { AxeBuilder } = require('@axe-core/playwright');
 const playwright = require('playwright');
 
 (async () => {
-  const browser = await playwright.chromium.launch();
+  const browser = await playwright.chromium.launch({ headless: true });
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.goto('https://dequeuniversity.com/demo/mars/');
-  const results = await new AxeBuilder({ page }).analyze();
-  console.log(results);
+
+  try {
+    const results = await new AxeBuilder({ page }).analyze();
+    console.log(results);
+  } catch (e) {
+    console.error(e);
+  }
+
   await browser.close();
-})();
+})();

packages/playwright/package.json

@@ -45,7 +45,7 @@
     "test": "mocha --timeout 60000 -r ts-node/register 'test/**.spec.ts'",
     "test:esm": "node test/esmTest.mjs",
     "coverage": "nyc npm run test",
-    "prepare": "npm run build"
+    "prepare": "npx playwright install && npm run build"
   },
   "dependencies": {
     "axe-core": "^4.7.0"

packages/playwright/src/index.ts

@@ -325,3 +325,5 @@ export default class AxeBuilder {
     `;
   }
 }
+
+export { AxeBuilder }

packages/playwright/test/axe-playwright.spec.ts

@@ -7,7 +7,7 @@ import testListen from 'test-listen';
 import { assert } from 'chai';
 import path from 'path';
 import { Server, createServer } from 'http';
-import AxeBuilder from '../src';
+import { AxeBuilder } from '../src';
 
 describe('@axe-core/playwright', () => {
   let server: Server;

packages/puppeteer/README.md

@@ -8,9 +8,9 @@ Previous versions of this program were maintained at [dequelabs/axe-puppeteer](h
 
 Install [Node.js](https://docs.npmjs.com/getting-started/installing-node) if you haven't already.
 
-Install Puppeteer: `npm install puppeteer --no-save`
+Install Puppeteer: `npm install puppeteer`
 
-Install axe-puppeteer and its dependencies: `npm install @axe-core/puppeteer`
+Install @axe-core/puppeteer: `npm install @axe-core/puppeteer`
 
 ## Usage
 
@@ -25,14 +25,15 @@ const puppeteer = require('puppeteer');
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  await page.setBypassCSP(true);
-
   await page.goto('https://dequeuniversity.com/demo/mars/');
 
-  const results = await new AxePuppeteer(page).analyze();
-  console.log(results);
+  try {
+    const results = await new AxePuppeteer(page).analyze();
+    console.log(results);
+  } catch (e) {
+    // do something with the error
+  }
 
-  await page.close();
   await browser.close();
 })();
 ```

packages/puppeteer/example.js

@@ -0,0 +1,17 @@
+const { AxePuppeteer } = require('@axe-core/puppeteer');
+const puppeteer = require('puppeteer');
+
+(async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+  await page.goto('https://dequeuniversity.com/demo/mars/');
+
+  try {
+    const results = await new AxePuppeteer(page).analyze();
+    console.log(results);
+  } catch (e) {
+    console.error(e);
+  }
+
+  await browser.close();
+})();

packages/puppeteer/test/axe-puppeteer.spec.ts

@@ -7,7 +7,7 @@ import Puppeteer, { Browser, Page } from 'puppeteer';
 import { createServer, Server } from 'http';
 import * as sinon from 'sinon';
 import testListen from 'test-listen';
-import AxePuppeteer from '../src/index';
+import { AxePuppeteer } from '../src/index';
 import {
   startServer,
   puppeteerOpts,

packages/webdriverio/README.md

@@ -12,19 +12,9 @@ Install [Node.js](https://docs.npmjs.com/getting-started/installing-node) if you
 
 > Download and install any necessary browser drivers on your machine's PATH. [More on WebdriverIO setup](https://v6.webdriver.io/docs/gettingstarted.html#taking-the-first-step).
 
-Install `@axe-core/webdriverio` and its dependencies:
+Install WebdriverIO: `npm install webdriverio`
 
-NPM:
-
-```console
-npm install @axe-core/webdriverio
-```
-
-Yarn:
-
-```console
-yarn add @axe-core/webdriverio
-```
+Install @axe-core/webdriverio: `npm install @axe-core/webdriverio`
 
 ## Usage
 
@@ -33,26 +23,29 @@ This module uses a chainable API to assist in injecting, configuring, and analyz
 Here is an example of a script that will drive WebdriverIO to a page, perform an analysis, and then log results to the console.
 
 ```js
-const AxeBuilder = require('@axe-core/webdriverio').default;
+const { AxeBuilder } = require('@axe-core/webdriverio');
 const { remote } = require('webdriverio');
 
 (async () => {
   const client = await remote({
     logLevel: 'error',
     capabilities: {
-      browserName: 'firefox'
+      browserName: 'chrome',
+      'goog:chromeOptions': {
+        args: ['headless', 'disable-gpu']
+      }
     }
   });
-
   await client.url('https://dequeuniversity.com/demo/mars/');
 
-  const builder = new AxeBuilder({ client });
   try {
-    const results = await builder.analyze();
+    const results = await new AxeBuilder({ client }).analyze();
     console.log(results);
   } catch (e) {
-    console.error(e);
+    // do something with the error
   }
+
+  client.deleteSession();
 })();
 ```
 

packages/webdriverio/example.js

@@ -0,0 +1,24 @@
+const { AxeBuilder } = require('@axe-core/webdriverio');
+const { remote } = require('webdriverio');
+
+(async () => {
+  const client = await remote({
+    logLevel: 'error',
+    capabilities: {
+      browserName: 'chrome',
+      'goog:chromeOptions': {
+        args: ['headless', 'disable-gpu']
+      }
+    }
+  });
+  await client.url('https://dequeuniversity.com/demo/mars/');
+
+  try {
+    const results = await new AxeBuilder({ client }).analyze();
+    console.log(results);
+  } catch (e) {
+    console.error(e);
+  }
+
+  client.deleteSession();
+})();

packages/webdriverio/src/index.ts

@@ -351,3 +351,5 @@ export default class AxeBuilder {
     return res;
   }
 }
+
+export { AxeBuilder }

packages/webdriverio/test/axe-webdriverio.spec.ts

@@ -8,7 +8,7 @@ import { Server, createServer } from 'http';
 import net from 'net';
 import fs from 'fs';
 import delay from 'delay';
-import AxeBuilder from '../src';
+import { AxeBuilder } from '../src';
 import { logOrRethrowError } from '../src/utils';
 import type { AxeResults, Result } from 'axe-core';
 import child_process from 'child_process';

packages/webdriverjs/README.md

@@ -10,21 +10,9 @@ Install [Node.js](https://docs.npmjs.com/getting-started/installing-node) if you
 
 > Download and install any necessary browser drivers on your machine's PATH. [More on Webdriver setup](https://www.selenium.dev/documentation/en/webdriver/).
 
-Install Selenium Webdriver: `npm install selenium-webdriver --no-save`
+Install Selenium Webdriver: `npm install selenium-webdriver`
 
-Install @axe-core/webdriverjs and its dependencies:
-
-NPM:
-
-```console
-npm install @axe-core/webdriverjs
-```
-
-Yarn:
-
-```console
-yarn add @axe-core/webdriverjs
-```
+Install @axe-core/webdriverjs: `npm install @axe-core/webdriverjs`
 
 ## Usage
 
@@ -33,19 +21,26 @@ This module uses a chainable API to assist in injecting, configuring, and analyz
 Here is an example of a script that will drive WebdriverJS to a page, perform an analysis, and then log results to the console.
 
 ```js
-const AxeBuilder = require('@axe-core/webdriverjs');
-const WebDriver = require('selenium-webdriver');
-
-const driver = new WebDriver.Builder().forBrowser('firefox').build();
-
-driver.get('https://dequeuniversity.com/demo/mars/').then(() => {
-  new AxeBuilder(driver).analyze((err, results) => {
-    if (err) {
-      // Handle error somehow
-    }
+const { AxeBuilder } = require('@axe-core/webdriverjs');
+const { Builder } = require('selenium-webdriver');
+const chrome = require('selenium-webdriver/chrome');
+
+(async () => {
+  const driver = Builder()
+    .forBrowser('chrome')
+    .setChromeOptions(new chrome.Options().headless())
+    .build();
+  await driver.get('https://dequeuniversity.com/demo/mars/');
+
+  try {
+    const results = await new AxeBuilder(driver).analyze();
     console.log(results);
-  });
-});
+  } catch(e) {
+    // do something with the error
+  }
+
+  await driver.quit();
+})();
 ```
 
 ## AxeBuilder(driver: Webdriver.WebDriver[, axeSource: string])

packages/webdriverjs/example.js

@@ -1,13 +1,20 @@
-const AxeBuilder = require('@axe-core/webdriverjs');
-const WebDriver = require('selenium-webdriver');
+const { AxeBuilder } = require('@axe-core/webdriverjs');
+const { Builder } = require('selenium-webdriver');
+const chrome = require('selenium-webdriver/chrome');
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 (async () => {
-  const driver = new WebDriver.Builder().forBrowser('chrome').build();
-  await driver.get('https://html5-sandbox.glitch.me/');
-  const results = await new AxeBuilder(driver, null, {
-    noSandbox: true
-  }).analyze();
-  console.log(results);
+  const driver = new Builder()
+    .forBrowser('chrome')
+    .setChromeOptions(new chrome.Options().headless())
+    .build();
+  await driver.get('https://dequeuniversity.com/demo/mars/');
+
+  try {
+    const results = await new AxeBuilder(driver).analyze();
+    console.log(results);
+  } catch(e) {
+    console.error(e);
+  }
+
   await driver.quit();
 })();

packages/webdriverjs/src/index.ts

@@ -20,7 +20,7 @@ import {
 } from './browser';
 import assert from 'assert';
 
-class AxeBuilder {
+export default class AxeBuilder {
   private driver: WebDriver;
   private axeSource: string;
   private includes: SerialSelectorList;
@@ -267,8 +267,4 @@ class AxeBuilder {
   }
 }
 
-if (typeof module === 'object') {
-  exports = module.exports = AxeBuilder;
-}
-
-export default AxeBuilder;
+export { AxeBuilder }

packages/webdriverjs/test/axe-webdriverjs.spec.ts

@@ -10,7 +10,7 @@ import path from 'path';
 import fs from 'fs';
 import { Server, createServer } from 'http';
 import { Webdriver, connectToChromeDriver } from './test-utils';
-import AxeBuilder from '../src';
+import { AxeBuilder } from '../src';
 import { axeRunPartial } from '../src/browser';
 import child_process from 'child_process';
 import { ChildProcessWithoutNullStreams } from 'child_process';