Add test page and test of test page (#7)

Sets up a test of a static page using selenium-webdriver

* Adds a test page at src/index.html
* Adds a test of it at tests/index.test.ts
* Removes placeholder tests
* Adds a yarn serve (I wanted it for testing purposes but thought it might be nice to keep)
* Switches to windows-2019 vmImage for testing (because it has selenium webdriver binaries avaiable)
* Remove code coverage (there is no non-test js/ts code to cover)
* Switch to jest-standard-output reporter to work around jestjs/jest#5064
* Update documenation
* Enable use of the CHROMEDRIVER env var in pipelines agents

typescript-selenium-webdriver/README.md

@@ -5,6 +5,8 @@
 
 This sample demonstrates how you might set up a CI build for a simple html page to perform end to end browser accessibility tests, including how to suppress known failures using a baseline file.
 
+This tests in the sample rely on having a [Selenium](https://www.seleniumhq.org/) WebDriver binary available on your PATH. These binaries are [available by default in many Azure Pipelines hosted agents](https://docs.microsoft.com/en-us/azure/devops/pipelines/test/continuous-test-selenium), but you may need to install them yourself ([ChromeDriver](http://chromedriver.chromium.org/downloads), [geckodriver](https://github.com/mozilla/geckodriver)) to run the tests on your local machine or in a custom build agent.
+
 The main technologies this sample uses are:
 
 * [http-server](https://www.npmjs.com/package/http-server) to run a localhost web server hosting a static html page

typescript-selenium-webdriver/azure-pipelines.yml

@@ -1,7 +1,10 @@
 # Copyright (c) Microsoft Corporation. All rights reserved.
 # Licensed under the MIT License.
 pool:
-    vmImage: 'ubuntu-16.04'
+    # The 'windows-2019' and 'vs20xx-windows' vmImages come pre-installed with selenium drivers for common browsers.
+    # To use most other vmImages, you'll need to add a step to install these before running yarn test.
+    # See https://docs.microsoft.com/en-us/azure/devops/pipelines/test/continuous-test-selenium
+    vmImage: 'windows-2019'
 
 steps:
     - task: NodeTool@0
@@ -23,10 +26,3 @@ steps:
           testRunTitle: typescript-selenium-webdriver
       condition: always()
       displayName: publish test results
-
-    - task: PublishCodeCoverageResults@1
-      inputs:
-          codeCoverageTool: Cobertura
-          summaryFileLocation: $(Build.SourcesDirectory)/typescript-selenium-webdriver/test-results/coverage/cobertura-coverage.xml
-          failIfCoverageEmpty: true
-      displayName: publish code coverage

typescript-selenium-webdriver/jest.config.js

@@ -3,12 +3,13 @@
 module.exports = {
     preset:'ts-jest',
     testEnvironment: 'node',
-    collectCoverage: true,
-    collectCoverageFrom: ['./**/*.ts', '!./**/*.test.ts'],
-    coverageDirectory: './test-results/coverage',
-    coverageReporters: ['json', 'lcov', 'text', 'cobertura'],
     reporters: [
-        'default',
+        // This is for console output. Using jest-standard-reporter instead of 'default'
+        // works around https://github.com/facebook/jest/issues/5064
+        'jest-standard-reporter',
+
+        // This is to populate the Tests tab on the Build Results page in Azure Pipelines.
+        // See the "publish test results" step in ./azure-pipelines.yml.
         [
             'jest-junit',
             {

typescript-selenium-webdriver/package.json

@@ -6,15 +6,19 @@
     "dependencies": {},
     "devDependencies": {
         "@types/jest": "^24.0.12",
-        "@types/node": "^12.0.0",
+        "@types/node": "^12.0.2",
+        "@types/selenium-webdriver": "^4.0.0",
         "axe-webdriverjs": "^2.2.0",
+        "http-server": "^0.11.1",
         "jest": "^24.8.0",
         "jest-junit": "^6.4.0",
+        "jest-standard-reporter": "^1.0.0",
         "selenium-webdriver": "^4.0.0-alpha.1",
         "ts-jest": "^24.0.2",
         "typescript": "^3.4.5"
     },
     "scripts": {
+        "serve": "http-server ./src",
         "test": "jest"
     }
 }

typescript-selenium-webdriver/src/index.html

@@ -0,0 +1,15 @@
+<html lang="en-US">
+    <head>
+        <title>Example page with some accessibility issues</title>
+    </head>
+    <body>
+        <h1>
+            This is a static sample page with some accessibility issues
+        </h1>
+        <ul>
+            <li>This text box has no accessible label: <input type="text"></li>
+            <li>This text's color contrast is too low: <span style="color: #A2A2A2">low-contrast text</span></li>
+            <li>This text has an invalid "role" attribute: <span role="invalid">span with invalid role</a></li>
+        </ul>
+    </body>
+</html>

typescript-selenium-webdriver/tests/index.test.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { Builder, By, until, ThenableWebDriver } from 'selenium-webdriver';
+import * as chrome from 'selenium-webdriver/chrome';
+import * as path from 'path';
+
+describe('index.html', () => {
+    let driver: ThenableWebDriver;
+
+    // Starting a browser instance is time-consuming, so we share one browser instance between
+    // all tests in the file (by initializing it in beforeAll rather than beforeEach)
+    beforeAll(async () => {
+        // The default timeout (5 seconds) is not always enough to start/quit a browser instance
+        jest.setTimeout(30000);
+
+        // This is for the benefit of the Azure Pipelines Hosted Windows agents, which come with
+        // webdrivers preinstalled but not on the PATH where Selenium looks for them by default.
+        // See https://docs.microsoft.com/en-us/azure/devops/pipelines/test/continuous-test-selenium#decide-how-you-will-deploy-and-test-your-app
+        if (process.env.ChromeWebDriver) {
+            const hostedAgentChromedriverPath = path.join(process.env.ChromeWebDriver, 'chromedriver.exe');
+            const chromeService = new chrome.ServiceBuilder(hostedAgentChromedriverPath).build();
+            chrome.setDefaultService(chromeService);
+        }
+
+        // Selenium supports many browsers, not just Chrome.
+        // See https://www.npmjs.com/package/selenium-webdriver for examples.
+        driver = new Builder()
+            .forBrowser('chrome')
+            .setChromeOptions(new chrome.Options().headless())
+            .build();
+    });
+
+    afterAll(async () => {
+        await driver.quit();
+    });
+
+    beforeEach(async () => {
+        // For simplicity, we're pointing our test browser directly to a static html file on disk.
+        //
+        // In a real project, you would probably use a localhost http server (Express.js, for example)
+        // and point selenium-webdriver to a http://localhost link.
+        //
+        // See https://jestjs.io/docs/en/testing-frameworks for examples.
+        const pageUnderTest = 'file://' + path.join(__dirname, '..', 'src', 'index.html');
+        await driver.get(pageUnderTest);
+    });
+
+    it('renders the expected header text', async () => {
+        const header = await driver.wait(until.elementLocated(By.css('h1')));
+        await driver.wait(until.elementIsVisible(header));
+        const headerText = await header.getText();
+        expect(headerText).toEqual('This is a static sample page with some accessibility issues');
+    });
+});