How To Output Debugging Log When Running Cypress within DevOps Pipeline

[Vincent-Lz-Zhang]

Hi There,

For some reasons, the results of the tests are different when running locally, and therefore I cannot replicate the failures on my machine. I need to be able to debug in the pipeline, I want to be able to output the values (generated by cy.log(), or console.log()) in the pipeline logs as shown below.

[andrewtheart]

I have gotten the following to work:

Package.json: cross-env is installed and in script "test", first call cross-env package to set the standard Cypress debug filter variable to (cypress:*)

{
  "name": "cypressscripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cross-env DEBUG=cypress:* npx cypress run", 
    "cypressif": "npm i -D cypress-if"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^13.2.0"
  },
  "dependencies": {
    "cypress-mochawesome-reporter": "^3.3.0",
    "cypress-multi-reporters": "^1.6.3",
    "junit-report-merger": "^6.0.0",
    "mocha": "^10.2.0",
    "mocha-junit-reporter": "^2.2.0",
    "cross-env": "7.0.3"
  }
}

Your pipeline code: add a command line task. Note we are calling the "test" command defined earlier, and passing an extra "--" after that call to ensure that any arguments following the extra "--" are passed to "npx cypress run" command and not the cross-env command.

    - task: CmdLine@2
      displayName: 'Run Cypress Screenshot process'
      inputs:
        script: 'call npm run test -- --browser electron --env environment=${{ parameters.environment }}'
        workingDirectory: <cypress directory>

[Vincent-Lz-Zhang]

Thank you, Andrew. Appreciated your reply.

I am wondering if we can get the log emitted by statements like cy.log('abc') displayed in the console?

I managed to make my project work with your suggestion, I got a lot more logs now, but it does not output those logs emitted by cy.log() method.

[Vincent-Lz-Zhang]

I managed to get what I want based on your solution.

cy.log() doesn't work, so I changed to console.log().

My test code looks like the following:

describe("My Spec", () => {
  it("My case", () => {
  
	console.log(`This is a log test: ${myMethod("myParam")}`);
	
    // my test code
  });
});

My package.json file (I use a tool called percy as well):

"scripts": {
  "cypress:DEV:e2e": "cross-env DEBUG=cypress:server:browsers:* npx percy exec -- cypress run --env environmentUrl=https://my.dev.domain/ --spec 'cypress/mySpecPath/*'",
}

My pipeline script (a template, also I use script task):

steps:
  - task: Npm@1
    displayName: Install Packages
    inputs:
      command: ci
      workingDir: $(Pipeline.Workspace)\MyTestProjectDir
      verbose: false
  - script: cd $(Pipeline.Workspace)\MyTestProjectDir & npm run cypress:DEV:e2e
    displayName: Cypress Automation Tests
    env:
      PERCY_TOKEN: 123abc
      PERCY_ENABLE: 1

That gives me a log entry as shown:

2024-05-15T22:17:18.9096698Z 2024-05-15T22:17:18.908Z cypress:server:browsers:electron console message: { column: 17, level: 'log', line: 1493, source: 'console-api', text: 'This is a log test: value returned by myMethod()', url: 'http://localhost:64487/__cypress/tests?p=cypress\\mySpecPath\\mytest.spec.ts' }

In your reply, you used

DEBUG=cypress:*

I guess this setting is like a filter, so based on the pattern of the logs, I changed it to

DEBUG=cypress:server:browsers:*

It's too much to output every log from cypress, I got 1600 more entries. I also tried cypress:server:browsers:electron console message:*, but it doesn't work, I guess because the setting only works on the log source, which is "cypress:server:browsers:electron", and the "console message" part is not considered part of the log source. Although I still get lots of log entries that I don't need, I am happy with this outcome.

Thank you again.