What is the process for logging in or authenticating before running tests with pa11y-ci?

Is there a way to authenticate users and test pages using pa11y-ci?

When running pa11y-ci, I typically use this command:

pa11y-ci --sitemap http://www.example.com/sitemap.xml --sitemap-find https --sitemap-replace http

I came across some helpful information on simulating user interaction with pa11y before testing.

For my Drupal setup, the login process involves the following steps:

    "actions": [
      'navigate to http://example.lndo.site/user/login'
        'set field #edit-name to pa11y',
        'set field #password to password',
        'click element #edit-submit',
        'wait for path to be /user'
    ]

However, I'm unsure of how to incorporate these "actions" into my .pa11yci configuration file or how to utilize them when calling pa11y-ci.

Can anyone provide guidance on logging in before initiating a pa11y-ci test?

javascripttestingaccessibilitypa11y

Answer №1

In my .pa11yci file, I found a workaround for logging in successfully:

I start by navigating through the anonymous pages with a logout first, then I log in, and finally test the authenticated pages.

"urls": [
    {
      "url": "http://example.com/first-page",
        "actions": [
          "navigate to http://example.com/user/logout"
        ]
    },
    "REPLACE_BASE_URL/user/login",
    "REPLACE_BASE_URL/user/register",
    "REPLACE_BASE_URL/user/password",
    {
      "url": "http://example.lndo.site/auth-page-0",
        "actions": [
          "navigate to http://example.lndo.site/user/login",
          "set field #edit-name to <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="106071212169507568717d607c753e737f7d">[email protected]</a>",
          "set field #edit-pass to password",
          "click element #edit-submit",
          "wait for element #user-page-unique-element to be visible"
       ]
     },
     "http://example.com/auth-page-1",
     "http://example.com/auth-page-2",
    ]
  }

The downside of this method is that it doesn't allow me to use the --sitemap command to test authenticated pages.

Answer №2

While Patrick provided a helpful solution, I found that in addition to his advice, I had to modify the incognito mode setting to false for it to properly function. This change was made within the .pa11yci configuration file. The snippet of code below highlights where I inserted this adjustment just before the start of the url's section:

"defaults" : {
    "useIncognitoBrowserContext": false
},
"urls": [
  ...
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bringing Together AngularJS and JQuery: Using $(document).ready(function()) in Harmony with Angular Controller

Can you lend me a hand in understanding this? I have an angular controller that is structured like so: angular.module('myApp', []) .controller('ListCtrl', function($scope, $timeout, $http){ // Making API calls for Health List ...

javascriptjqueryangularjsdocument-ready

What could be the reason for the absence of definition for 'res'?

As I work on coding a bot using discord.js, I am facing an issue while trying to set up a system where the bot can send a message as long as it is not blacklisted. However, every time I attempt to run the function, I encounter this error message: Reference ...

javascriptnode.jsdiscord.js

Sending a post request in AngularJS using the $resource API

As a beginner in angularjs, I am working on creating a login form that connects to a REST API URL when the user submits the form. http://XXX/XXX/index.php/report/login/format/json Using PostMan REST client to configure the URL works fine! However, when ...

javascriptangularjshttpangular-services

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

javascripthtmlreactjs

How can I use jQuery to pinpoint where my focus currently lies and debug any issues?

Triggering focus() on an element is a simple task, but after encountering debugging problems, I've come to realize that finding out where my focus has shifted can be quite challenging. The issue arises when I'm creating a modal window using jq.UI ...

javascriptjqueryjquery-uifocusjquery-events

The save feature becomes dysfunctional after switching to the Material-UI dependency in a React project

After integrating the Material-UI dependency into my ReactJS code, I encountered an issue where the "save" functionality no longer works properly. Previously, when editing a task in my simple Todo list app, the new name would be saved successfully. However ...

javascripthtmlreactjsmaterial-ui

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Obtaining JSON data in an Angular service: A beginner's guide

My JSON file has the following structure: { "user": [ { "id": 0, "data": [ { "userName": "iheb", "useremail": "", "userPassword": "kkk" } ], "questionnaireListe": [ { ...

javascriptangulartypescript

Having trouble with updating PHP MySQL data using serializeArray?

My HTML page includes a display of temperature with two buttons - one for updating MySQL with the temperature setting and the other for toggling on/off data. Previously, everything was functioning correctly with the initial code: function myFunction() { ...

javascriptphpmysql

Personalize headers in v-data-table while preserving default sorting capabilities

I'm looking to enhance my v-data-table by making the table headers "tab-able". To achieve this, I decided to create a slot and include tabindex on the columns. However, I encountered an issue where the sorting functionality stopped working. Does an ...

javascriptvue.jsvuetify.jsv-data-table

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

My Vue app is quite large, built with Vuetify, and I recently integrated vue-i18n into it. The json translation files are set up correctly, and the $t() calls work fine in my components and other .js files. However, I'm struggling to change the locale ...

javascriptvue.jslocalizationvuetify.jsvue-i18n

Angular5+ Error: Unable to retrieve summary for RouterOutlet directive due to illegal state

When attempting to build my Angular App using ng build --prod --aot, I consistently encounter the following error: ERROR in : Illegal state: Could not load the summary for directive RouterOutlet in C:/Path-To-Project/node_modules/@angular/Router/router.d. ...

javascriptangulartypescriptangular-routerng-build

The ins and outs of function returns and callback mechanisms

I'm encountering an issue related to the order of my functions and I can't figure out the reason behind it. When I hover over the call for function_2 inside the first function, VSCode shows me the result as Promise<void>, and the console p ...

javascriptnode.jsdiscord.js

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

I am currently working on the development of a process to create HTML5 based eBooks for both desktop and mobile use using Adobe InDesign and exporting them with a plugin called In5. This plugin allows for the incorporation of html, css, and javascript duri ...

javascripthtmljquerycssadobe-indesign

Comparing the use of jQuery's data() method versus directly accessing attributes with native JavaScript using get

I want to retrieve general information from my website using javascript. I have a few different options available: I could use an html element: <input type="hidden" value="MyValue"/> Another option is to use a custom attribute in an existing h ...

javascriptjqueryhtml

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

I'm new to working with Angular, specifically using Angular 15. I have a Rest API response that I need to parse and display in the UI using Angular. To achieve this, I employed the use of HttpClient for making GET requests and parsing the responses. ...

javascriptangulartypescriptrest

How to efficiently import Xlsx and csv files using AngularJS

I am looking for a way to extract data in json format from each line of xlsx and csv files using AngularJS. Currently, I am utilizing the angular-file-upload library to access the file as shown below: $scope.LatLongUploader = new FileUploader({ //url ...

javascriptangularjsexcelcsvreadfile

On IOS, Three.js ensures that the RGB values of a texture are set to zero whenever the ALPHA value

Working on a WebGL project utilizing javascript and the three.js framework, I am in the process of crafting a custom shader with GLSL. In this shader, I must load various lookup tables to utilize individual RGBA values for calculations rather than renderin ...

javascriptiosthree.jsglslwebgl

Detecting Collisions in a Canvas-Based Game

As part of my educational project, I am developing a basic shooter game using HTML5 canvas. The objective of the game is to move left and right while shooting with the spacebar key. When the bullets are fired, they travel upwards, and the enemy moves downw ...

javascripthtmlcanvashtml5-canvas

Identify all elements that possess a specific attribute with a precise value in jQuery, and return either true or false

I'm having a slight issue with jQuery. Below is the code in question: if ($("select[rendelo='" + rendelo + "'][nap='" + nap + "'][napszak='" + napszak + "']").val() == 0) { alert('sth'); ...

javascriptjqueryselector