Having difficulty integrating plugins like Lighthouse into my Cypress project

I need assistance with integrating the cypress automation plugin into my project. I made changes to my index.js file in the plugin folder, but now I am receiving this error:

cy.lighthouse() is not a function 

Here is my index.js file content:

const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
};

If anyone can provide guidance on resolving this issue, I would greatly appreciate it. Thank you!

Answer №1

Upon reviewing the documentation, you will find the complete cypress/plugins/index.js

Cypress v9 - cypress/plugins/index.js

const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, launchOptions) => {
    prepareAudit(launchOptions);
  });

  on("task", {
    lighthouse: lighthouse(), // remember to call the function
    pa11y: pa11y(), // remember to call the function
  });
};

However, if you encounter the error message "cy.lighthouse() is not a function," it may be due to a missing line in cypress/support/index.js, which you should also include

Cypress v9 - cypress/support/index.js

import "cypress-audit/commands";

For the most recent version of Cypress

Cypress v10 - cypress.config.js

const { defineConfig } = require('cypress')
const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234',
    setupNodeEvents(on, config) {

    on("before:browser:launch", (browser = {}, launchOptions) => {
      prepareAudit(launchOptions);
    });

    on("task", {
      lighthouse: lighthouse(), // calling the function is crucial
      pa11y: pa11y(), // calling the function is crucial
    }); 
  },
})

Cypress v10 - cypress/support/e2e.js

import "cypress-audit/commands";

Answer №2

I have found a solution that works perfectly for the given problem:

const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, launchOptions) => {
    prepareAudit(launchOptions);
  });

  on("task", {
    lighthouse: lighthouse(), // invoking the function is crucial
    pa11y: pa11y(), // invoking the function is crucial
  });
};

Using Cypress v9 - cypress/support/index.js

import "cypress-audit/commands";

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

Using JavaScript to modify the text of a label seems to be a challenging

UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...

Tips for creating AngularJS nested transcludes

I'm currently delving into the world of angular directives/transclusion to manage the creation of custom panels within my application. Unfortunately, I seem to have hit a roadblock as the transcluded content is not displaying in the HTML. Below is th ...

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

Having trouble handling file uploads in Laravel via JQuery Ajax requests

When attempting to upload a CSV / Excel file and receiving it through an ajax request, the process is not functioning as anticipated. I employed a formdata object to upload the files in this manner: const formData = new FormData() formDa ...

How to stop Accordion from automatically collapsing when clicking on AccordionDetails in Material-UI

I am working on a React web project with two identical menus. To achieve this, I created a component for the menu and rendered it twice in the App component. For the menu design, I opted to use the Material UI Accordion. However, I encountered an issue wh ...

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

When you duplicate the React State object and make changes to the copied object, it directly affects

When attempting to duplicate a state object, I noticed that the state object is being modified directly in the code snippet below: @boundMethod private _onClickDeleteAttachment(attachmentName: string): void { console.log("_onClickDeleteAttachment | th ...

Looking for assistance with implementing a jQuery function for an onClick event on

I've been diving into learning jquery and managed to create a basic checkbox feature with a function that allows you to set all options as read-only by checking the "None of the above" button. <html> <body> <form id="diagnos ...

Retrieving property values from an object across multiple levels based on property name

I have a complex object structure that contains price information at various levels. My goal is to retrieve all values from the Price property, regardless of their nesting within the object. var o = { Id: 1, Price: 10, Attribute: { Id: ...

Is it possible to trigger the onNewRequest property when the onBlur event is fired for AutoComplete in Material-UI?

Currently, I am utilizing Material-UI and making use of the onNewRequest property in the AutoComplete field. However, the onNewRequest only triggers when Enter is pressed or when a value is selected. I am interested in calling the onNewRequest even when ...

IE8 triggers automatic download upon receiving JSON response using jQuery

Can you help me make IE8 compatible with this code using jQuery to handle an ajax request that returns data as JSON? $.ajax({ url: formAction, type: 'post', dataType: 'json', data: form, success: ...

"Transferring an array of data to a Laravel controller via AJAX: A step-by-step guide

Is there a way to send arrays of data to the back-end all at once? The Problem 1. This is what I'm currently sending: array:5 [ "_token" => "S5s5ZTTnnP93MyXgCql0l9vhHsiqt5VWaFyEedXj" "product_id" => "21" "specification_id" => "6" " ...

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

What is preventing me from generating a string for transform:translate within Angular.js?

Attempting a new approach here $scope.graph.transform = "transform: translate(" + $scope.graph.width + "," + $scope.graph.height + ");"; Despite my efforts <h3>transform: <span ng-bind="grap ...

Unable to display text overlay on image in AngularJS

I am experiencing an issue with displaying captions on image modals. .controller('HomeController',['dataProvider','$scope','$location', '$modal', '$log', 'authService', function ...

I made changes to my npm init config and now I am unable to revert it back to its original default settings

I attempted to set a default name in order to avoid typing it repeatedly, but unfortunately, my actions ended up causing issues with the creation of my package.json file. Now, when I execute 'npm init' in a new project, instead of going through t ...

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

Using jQuery Ajax to send data and retrieve responses in the Codeigniter framework

I am struggling with passing values in CodeIgniter and I need some guidance. Could you provide an example code snippet using CodeIgniter to send a value from a view to a controller using Ajax and jQuery, and then display the result on the same page? In my ...

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...