Unable to use pa11y actions to login to sites

Question

I'm seemingly unable to login to sites using pa11y and it's 'actions' feature. The documentation and sites I've found talking about pa11y actions seem to indicate this is a simple affair, but I'm having no luck.

I've attempted to login to various sites ranging from established sites (GitHub), to my own sites hosted in the cloud, and even sites running on my local machine. All of them get to the "click" action for the login form submit button (usually a POST request), then hang and eventually timeout, before the "wait for url to change" action takes place.

If I set headless to false and open the inspector in Chromium, I can see the POST request being made after the login button has been clicked, but it never completes. Interestingly, when I try this against sites I control and can see the logs for, I see the successful logins happening on the server side, but pa11y (maybe it's really a puppeteer or headless-chrome issue) never seems to receive the response.

I've included the code I've tried for GitHub which is not working. I'm using Node 8.11.3 on a Mac to run this. I've even tried on a second computer and still have the same issue. The code is based on an example given in the pa11y docs and modified only slightly (https://github.com/pa11y/pa11y/blob/master/example/actions/index.js).

What am I doing wrong?

'use strict';

const pa11y = require('pa11y');

runExample();

async function runExample() {

  try {

    var urlToTest = 'https://github.com/login';

    const result = await pa11y(urlToTest, {

      actions: [
        'navigate to https://github.com/login',
        'set field #login_field to MYUSERNAME',
        'set field #password to MYPASSWORD',
        'click element #login input.btn.btn-primary.btn-block',
        // everything stops here...
        'wait for url to not be https://github.com/login',
        'navigate to https://github.com/settings/profile',
        'screen-capture github.png'
      ],

      chromeLaunchConfig: {
        headless: false,
        slowMo: 250
      },

      log: {
        debug: console.log,
        error: console.error,
        info: console.log
      },

      timeout: 90000

    });

    console.log(result);

  } catch (error) {
    console.error(error.message);
  }

}

Answer 1

The problem appears to stem from using certain versions of the puppeteer library, which is a dependency of pa11y. Using puppeteer 1.6.2 results in a working environment. Using puppeteer 1.7.0 was resulting timeout issues. I was able to fix this for myself by specifying "puppeteer": "~1.6.0", alongside the pa11y dependency in my package.json file. The current version of Pa11y will happily work with any version of puppeteer down to 1.4.0.

Here's the relevant issue on GitHub for the pa11y library to follow for updates: https://github.com/pa11y/pa11y/issues/421

Answer 2

I had the same issue. I manage to pass the login page by combining this: https://github.com/emadehsan/thal and the example from here https://github.com/pa11y/pa11y/blob/master/example/puppeteer/index.js. Maybe it helps you.