chore: changes for manual mode

cypress/manual-mode/cypress/e2e/login.cy.js

@@ -1,20 +1,34 @@
+/*
+  Lets see the number of page state calculation
+  As the auto-analyze is false, it will not analyze automatically
+
+  We first navigate to the page.
+  Then we analyze the page. (+1)
+  Then we fill the form.
+  Then Turn on auto-analyze.
+  Then we click the submit button (+1)
+  Then we wait for the element to appear.
+  Then we analyze the page. (+1)
+  So, the total number of page state calculation should be 3.
+*/
 describe('My Login Application', () => {
   it('should login with valid credentials', () => {
     cy.visit('https://the-internet.herokuapp.com/login')
-      // Analyze the page.
-      .axeAnalyze()
+      // Analyze after navigating to the page.
+      .axeWatcherAnalyze()
       .get('#username')
       .type('tomsmith')
       .get('#password')
       .type('SuperSecretPassword!')
+      // Start automatic axe analysis.
+      .axeWatcherStart()
       .get('button[type="submit"]')
       .click()
-      .wait(1000)
-      // Analyze the page.
-      .axeAnalyze()
-      // Restart automatic axe analysis.
-      .axeStart()
       .get('#flash')
       .should('exist')
+      // Stop automatic axe analysis.
+      .axeWatcherStop()
+      // Analyze after logging in.
+      .axeWatcherAnalyze()
   })
 })

playwright-test/manual-mode/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "multi-page",
+  "private": true,
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@axe-core/watcher": "^3.16.1",
+    "@playwright/test": "^1.45.1",
+    "typescript": "^5.5.3"
+  }
+}

playwright-test/manual-mode/playwright.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({ testDir: './tests' })

playwright-test/manual-mode/tests/fixtures.ts

@@ -0,0 +1,18 @@
+import { playwrightTest } from '@axe-core/watcher'
+import assert from 'assert'
+
+const { SERVER_URL = 'https://axe.deque.com', API_KEY } = process.env
+assert(API_KEY, 'API_KEY is required')
+
+const { test, expect } = playwrightTest({
+  axe: {
+    apiKey: API_KEY,
+    serverURL: SERVER_URL,
+    /* Disable auto-analyze */
+    autoAnalyze: false
+  },
+  headless: false,
+  args: ['--headless=new']
+})
+
+export { test, expect }

playwright-test/manual-mode/tests/login.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from './fixtures'
+
+/*
+    Lets see the number of page state calculation
+    As the auto-analyze is false, it will not analyze automatically
+
+    We first navigate to the page.
+    Then we analyze the page. (+1)
+    Then we fill the form.
+    Then Turn on auto-analyze.
+    Then we click the submit button (+1)
+    Then we wait for the element to appear.
+    Then we analyze the page. (+1)
+    So, the total number of page state calculation should be 3.
+
+*/
+
+test.describe('Login page', () => {
+    test('should login', async ({ page }) => {
+      await page.goto('https://the-internet.herokuapp.com/login')
+
+      /* Analyze after navigation to the page */
+      await page.axeWatcher.analyze();
+
+      await page.locator('#username').fill('tomsmith')
+      await page.locator('#password').fill('SuperSecretPassword!')
+
+      /* starts auto-analyze to true */
+      await page.axeWatcher.start();
+
+      await page.locator('button[type="submit"]').click()
+      const flash = await page.waitForSelector('#flash')
+
+      /* stops auto-analyze */
+      await page.axeWatcher.stop();
+
+      /* Analyze after form submission */
+      await page.axeWatcher.analyze();
+
+      await expect(flash).not.toBeNull()
+    })
+})

playwright-test/manual-mode/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "lib": ["dom", "es2020"],
+    "moduleResolution": "node",
+    "target": "ES2020",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  }
+}

playwright/manual-mode/tests/login.js

@@ -43,6 +43,20 @@ describe('My Application', () => {
     await page.close()
   })
 
+
+  /*
+    Lets see the number of page state calculation
+    As the auto-analyze is false, it will not analyze automatically
+
+    We first navigate to the page.
+    Then we analyze the page. (+1)
+    Then we fill the form.
+    Then Turn on auto-analyze.
+    Then we click the submit button (+1)
+    Then we wait for the element to appear.
+    Then we analyze the page. (+1)
+    So, the total number of page state calculation should be 3.
+  */
   describe('Login', () => {
     describe('with valid credentials', () => {
       it('should login', async () => {
@@ -54,10 +68,17 @@ describe('My Application', () => {
         await page.locator('#username').fill('tomsmith')
         await page.locator('#password').fill('SuperSecretPassword!')
 
+        /* starts auto-analyze to true */
+        await controller.start()
+
+        /* analyze automatically as auto-analyze it true*/
         await page.locator('button[type="submit"]').click()
 
         const element = await page.waitForSelector('#flash')
 
+        /* stops auto-analyze */
+        await controller.stop()
+
         /* Analyze after logging in. */
         await controller.analyze()
 

webdriverjs/manual-mode/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "basic",
+  "private": true,
+  "scripts": {
+    "test": "mocha --timeout 20s tests/*.js"
+  },
+  "devDependencies": {
+    "@axe-core/watcher": "^3.16.1",
+    "chai": "^4",
+    "chromedriver": "^126.0.4",
+    "mocha": "^10.6.0",
+    "selenium-webdriver": "^4.22.0"
+  }
+}

webdriverjs/manual-mode/tests/login.js

@@ -0,0 +1,84 @@
+const { Builder, until } = require('selenium-webdriver')
+const {
+  wrapWebdriver,
+  webdriverConfig,
+  WebdriverController
+} = require('@axe-core/watcher')
+const { Options } = require('selenium-webdriver/chrome')
+
+/* Get your configuration from environment variables. */
+const { API_KEY, SERVER_URL = 'https://axe.deque.com' } = process.env
+
+describe('My Login Application', () => {
+  let browser
+  let controller
+
+  before(async () => {
+    const options = new Options()
+    options.addArguments('--headless=new')
+    browser = await new Builder()
+      .forBrowser('chrome')
+      .setChromeOptions(
+        webdriverConfig({
+          axe: {
+            apiKey: API_KEY,
+            serverURL: SERVER_URL,
+            /* Disable automatic analysis. */
+            autoAnalyze: false
+          },
+          options
+        })
+      )
+      .build()
+    controller = new WebdriverController(browser)
+    browser = wrapWebdriver(browser, controller)
+  })
+
+
+  /*
+    Lets see the number of page state calculation
+
+    As the auto-analyze is false, it will not analyze automatically
+    Then we navigate to the page.
+    Then we analyze the page. (+1)
+    Then we fill the form.
+    Then Turn on auto-analyze.
+    Then we click the submit button (+1)
+    Then we wait for the element to appear.
+    Then we analyze the page. (+1)
+
+    So, the total number of page state calculation should be 3.
+
+  */
+  describe('with valid credentials', () => {
+    it('should login', async () => {
+      await browser.get('https://the-internet.herokuapp.com/login')
+
+      /* Analyze after navigating to the page. */
+      await controller.analyze()
+
+      const username = await browser.findElement({ id: 'username' })
+      const password = await browser.findElement({ id: 'password' })
+
+      await username.sendKeys('tomsmith')
+      await password.sendKeys('SuperSecretPassword!')
+
+
+      /* Start automatic axe analysis. */
+      await controller.start()
+
+      const submit = await browser.findElement({ css: 'button[type="submit"]' })
+      await submit.click()
+
+      await browser.wait(until.elementLocated({ id: 'flash' }))
+
+      /* Stop automatic axe analysis. */
+      await controller.stop()
+
+      /* Analyze after logging in. */
+      await controller.analyze()
+
+      await browser.wait(until.urlContains('/secure'))
+    })
+  })
+})