0

I want to use https://www.npmjs.com/package/chalk for console logs.

Now if I use with console.log it works

console.log(chalk.blue("Hello World"))

but when I run it with cy.task it doesn't give any error but doesn't show any coloring

cy.task('log', chalk.blue("Hello World")); it prints Hello World but not in blue color

What am I doing wrong?

user16695029
  • 3,365
  • 5
  • 21
paul
  • 4,333
  • 16
  • 71
  • 144
  • Chalk is based on ANSI-standard escape sequences for terminals (real ones and virtual ones). If you send the strings Chalk builds to a terminal (that correctly interprets the codes), then it works. If you add the strings to HTML content, they won't work. – Pointy May 01 '23 at 16:27
  • @Pointy I am using mac terminal and iterm2, it should work on these right? – paul May 01 '23 at 17:28
  • Yes, however I don't know what Cypress does with those strings you pass through. (I'm also on MacOS.) – Pointy May 01 '23 at 17:51

1 Answers1

4

The Cypress cy.task() command is an interprocess communication (browser to nodejs) and it must serialize it's parameters.

I guess, from the result of your test, that means the ansi chars used to color the log entry might be stripped away.

One way to get around that is to invoke chalk inside the task.

import { defineConfig } from 'cypress'
import chalk from 'chalk';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        log({message, attributes}) {
          const fn = attributes.reduce((chalk, attr) => chalk[attr], chalk)
          console.log(fn(message))
          return null;
        },
      });

      return config;
    },
  },
});

Since chalk v5 is pure ESM, I had to convert the cypress.config.js to the ESM format given for typescript on this page Configuration File and add "type": "module", to the package.json, although the docs say you could also use the mjs extension.

This is the test

it('logs to terminal using chalk', () => {
  cy.task('log', {message: 'hello chalk', attributes: ['underline', 'bgBlue', 'bold', 'green']})
})

This is the output

enter image description here

user16695029
  • 3,365
  • 5
  • 21
  • It is failing to recognize `reduce`, and gives this error. `> Cannot read properties of undefined (reading 'reduce')` – paul May 02 '23 at 04:03
  • Looks like you have forgotten to bracket the arguments - `cy.task` can only take one argument, so you have to bracket them the same as I have (both in the test and in the task). – user16695029 May 02 '23 at 04:21
  • Sorry, I am not getting which one you are referring. Can you highlight in your answer? – paul May 02 '23 at 04:37
  • 1
    Yes, when you call `cy.task('log', message, attributes)`, only the `message` parameter is passed to the task - the `attributes` parameter is dropped hence the error message you received. See [task#Arguments](https://docs.cypress.io/api/commands/task#Arguments) - ***If you need to pass multiple arguments, use an object***. – user16695029 May 02 '23 at 04:46
  • So the call should be `cy.task('log', {message: 'hello chalk', attributes: [...]})` instead of `cy.task('log', 'hello chalk', [...])` – user16695029 May 02 '23 at 04:47
  • And inside the task you also need brackets `log({message, attributes})` – user16695029 May 02 '23 at 04:48
  • I tried copy-pasting the code that you shared, but still it is giving the error. Can you please check? I have uploaded the code here. https://github.com/foobarMintQA/testChalk – paul May 02 '23 at 05:21
  • 1
    I ran your repo, it worked! Had to clean up all that bother with the cypress config file(s). – user16695029 May 02 '23 at 06:41
  • Can you share the config file in your answer? or PR Commit in the repo? – paul May 02 '23 at 07:20