search

mfrachet / cypress-audit

⚡ Run Lighthouse and Pa11y audits directly in your E2E test suites
https://mfrachet.github.io/cypress-audit/
MIT License
353 stars 44 forks source link

Cypress-audit 3.0.0 Nx Typescript - Headless Mode Issue #58

Closed MuckT closed 3 years ago

MuckT commented 3 years ago

@mfrachet thought this might be useful to those hoping to use cypress-audit with an nx repo. Also I am having some issues with headless mode.

Steps

  1. Install Nx - The below uses Angular & I set my sample app name to 'todos'
  2. Install cypress-audit 
    npm install cypress-audit --save-dev
  3. Adjust apps\todos-e2e\src\plugins\index.js 
    
const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const { lighthouse, pa11y, prepareAudit } = require("cypress-audit");

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

on("task", { lighthouse: lighthouse(), // calling the function is important pa11y: pa11y(), // calling the function is important }); on('file:preprocessor', preprocessTypescript(config)); };

3. Add import to 'apps\todos-e2e\src\support'

// Import commands.js using ES2015 syntax: import './commands'; import 'cypress-audit/commands';

4. Add to 'apps\todos-e2e\src\support\commands.ts'

declare namespace Cypress { interface Chainable { login(email: string, password: string): void; lighthouse(...arg: any): any; pa11y(...arg: any): any; } }

5. Use in a test spec

describe('todos', () => { beforeEach(() => cy.visit('/'));

it('should use cypress audit', () => { cy.lighthouse( { performance: 75, accessibility: 95, 'best-practices': 93, seo: 90 }, { formFactor: 'desktop', screenEmulation: { mobile: false, width: 1920, height: 1080, deviceScaleFactor: 1, disabled: false, }, }); });

it('should use pa11y audit', () => { cy.pa11y(); }) });

6. run the e2e tests - Fails correctly

ng e2e --watch

7. run the e2e tests headless - Passes incorrectly

ng e2e

MuckT commented 3 years ago

Submitted a PR that I believe solves this issue #59

RoRoche commented 3 years ago

Hi @MuckT,

I'm facing an issue in spite of the same configuration. I have the following error message: cy.lighthouse is not a function while running my tests with ng e2e --watch My IDE spots an issue on cy.lighthouse(), saying TS2339: Property 'lighthouse' does not exist on type 'cy & EventEmitter' Am I missing some configuration?

The only difference is that I'm using https://github.com/TheBrainFamily/cypress-cucumber-preprocessor

MuckT commented 3 years ago

@RoRoche Can you try and use (cy as any).lighthouse() as recommended here: #36

Alternatively you could try my branch #59 with this in your package.json "cypress-audit": "MuckT/cypress-audit#master",

FannyBarco commented 3 years ago

Hello @MuckT

I have similar configuration: export const performanceReport = () => { cy.lighthouse( { performance: 5, accessibility: 95, }, { formFactor: 'desktop', screenEmulation: { mobile: false, width: 1920, height: 1080, deviceScaleFactor: 1, disabled: false, }, }); } and this package.json

"cypress": "^6.3.0", "cypress-audit": "MuckT/cypress-audit#master", "cypress-cucumber-preprocessor": "^4.0.0", "cypress-react-unit-test": "^4.11.2", "cypress-screenplay": "^0.1.0", "eslint-plugin-cypress": "^2.10.3", "lighthouse": "^7.0.1",

And I have this issue:

image

I think it is related.

MuckT commented 3 years ago

@FannyBarco do you have the commands from step four added? I've also noticed that sometimes other plugins can have issues running along side cypress-audit; can you try with just the cypress-audit plugin in Chrome?

mfrachet commented 3 years ago

I've managed to make nx work using the "index.d.ts" at the root of cypress-audit 🤔 . In this specific PR: https://github.com/mfrachet/cypress-audit/pull/60 .

Here are the files that I've modified in order to make it work:

Then I had to restart my visual studio code typescript plugin since it crashes all the time. And finally:

Screenshot 2021-01-28 at 09 16 48 (2)

Also, I've added this folder example https://github.com/mfrachet/cypress-audit/tree/master/examples/nx and make the NX build part of the CI. It means that we'll know in the future if something breaks for this particular tool 😊

I'll let this one open for some times to get your feedbacks.

Thanks for your help folks, for your help and feedbacks 🙏🏻

Lukaszli commented 3 years ago

Hello @MuckT

I have similar configuration: export const performanceReport = () => { cy.lighthouse( { performance: 5, accessibility: 95, }, { formFactor: 'desktop', screenEmulation: { mobile: false, width: 1920, height: 1080, deviceScaleFactor: 1, disabled: false, }, }); } and this package.json

"cypress": "^6.3.0", "cypress-audit": "MuckT/cypress-audit#master", "cypress-cucumber-preprocessor": "^4.0.0", "cypress-react-unit-test": "^4.11.2", "cypress-screenplay": "^0.1.0", "eslint-plugin-cypress": "^2.10.3", "lighthouse": "^7.0.1",

And I have this issue:

image

I think it is related.

I have the same issue, I did all the steps from readme, any ideas? I have plain JS.

mfrachet commented 3 years ago

probably not the same issue then. would you mind creating another one with steps to repro please ? 🙏🏻

RoRoche commented 3 years ago

My case if fixed now by including, at the top of the test, the cypress-audit commands such as: https://github.com/mfrachet/cypress-audit/blob/master/examples/nx/apps/nx-e2e/src/integration/app.spec.ts#L1

😃

Using "cypress-audit": "MuckT/cypress-audit#master" is also OK! 👍

Thanks a lot for your help.

mfrachet commented 3 years ago

Good to hear. I'm closing this for now. Feel free to reopen or comment if something is not okay 👍🏻

cdierkens commented 2 years ago

We solved this issue by explicitly setting the browser to chrome

project.json

{
  "targets": {
    "e2e": {
      "executor": "@nrwl/cypress:cypress",
      "options": {
        "cypressConfig": "apps/web-e2e/cypress.json",
        "devServerTarget": "web:serve",
        "browser": "chrome"
      }
    }
  }
}

or on the cli

nx e2e --browser=chrome