The CLI currently does not support custom layouts. I want to handle dynamic meta data different then environment variables storing your build id, branch name etc

[IvayloStoychev]

Is there any way to adjust the cli_config.json file to send a customised message like my previous message generated through the reported in playwright.config.ts file

Generated through CLI slack reporter:

Generated through playwright.config.ts slack reporter:

Like, how to add divider, how to send different mrkdwn lines in the message, can I bold some text, can I add some description for the passed/failed tests (like in the screenshot 2).

[ryanrosello-og]

this has been implemented in 1.1.70

create the following file cli_custom_layout.ts with the following contents and tweak it to suit your needs:

function generateCustomLayoutSimpleMeta(summaryResults) {
  const meta = [];
  if (summaryResults.meta) {
    for (let i = 0; i < summaryResults.meta.length; i += 1) {
      const { key, value } = summaryResults.meta[i];
      meta.push({
        type: 'section',
        text: {
          type: 'mrkdwn',
          text: `\n*${key}* :🙌\t${value}`,
        },
      });
    }
  }
  return [
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text:
          summaryResults.failed === 0
            ? ':tada: All tests passed!'
            : `😭${summaryResults.failed} failure(s) out of ${summaryResults.tests.length} tests`,
      },
    },
    ...meta,
  ];
}
exports.generateCustomLayoutSimpleMeta = generateCustomLayoutSimpleMeta;

NOTE:

• this file should not have any import statements, I couldn't quite figure out how to get nested dynamic imports to work properly
• it should have an export statement: exports.generateCustomLayoutSimpleMeta = generateCustomLayoutSimpleMeta;

You will then need to update your config file to use this custom layout file:

e.g.

{
  "sendResults": "always",
  "slackLogLevel": "error",
  "sendUsingBot": {
    "channels": ["demo"]
  },
  "showInThread": true,
  "meta": [
    { "key": "build", "value": "__ENV_blah" },
    { "key": "branch", "value": "master" },
    { "key": "commit", "value": "1234567890" },
    {
      "key": "results",
      "value": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
    }
  ],
  "maxNumberOfFailures": 1,
  "disableUnfurl": true,
  "customLayout": {
    "source": "./wherever_you_stored_the_file/cli_custom_layout.ts",
    "functionName": "generateCustomLayoutSimpleMeta"
  }
}

give this a shot @IvayloStoychev

[IvayloStoychev]

Hey @ryanrosello-og thanks for the provided update. However I test the suggested actions and unfortunately this custom layout config is not present in my slack report at all. Please find the files and actions that I did in order to test it. I have been create a cli_custom_layout.ts in my root directory of the tests with following content inside:

export function generateCustomLayoutSimpleMeta(summaryResults: { meta: string | any[]; failed: number; tests: string | any[]; }) {
  const meta = [];
  if (summaryResults.meta) {
    for (let i = 0; i < summaryResults.meta.length; i += 1) {
      const { key, value } = summaryResults.meta[i];
      meta.push({
        type: 'section',
        text: {
          type: 'mrkdwn',
          text: `\n*${key}* :🙌\t${value}`,
        },
      });
    }
  }
  return [
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text:
          summaryResults.failed === 0
            ? ':tada: All tests passed!'
            : `😭${summaryResults.failed} failure(s) out of ${summaryResults.tests.length} tests`,
      },
    },
    ...meta,
  ];
}
exports.generateCustomLayoutSimpleMeta = generateCustomLayoutSimpleMeta;

My cli_config.json have the following structure:

{
    "sendResults": "always",
    "slackLogLevel": "error",
    "sendUsingBot": {
      "channels": ["test_auto_slack_message"]
    },
    "showInThread": true,
    "meta": [
      { "key": "Name", "value": "__ENV_REPORT_NAME"}, 
      { "key": "Report link", "value": "__ENV_RESULT_URL"}
    ],
    "disableUnfurl": true,
    "customLayout": {
      "source": "./custom_slack_layout.ts",
      "functionName": "customLayoutSimpleMeta"
    }
  }

And the slack message generated after that is not updated at all and the new layout is not displayed in all cases (when I have passed and/or failed tests). Check screenshot below:

Could you please if there is something that I am missing in my files and configurations or suggest some other actions to try in my project. THanks in advance

[ryanrosello-og]

hi @IvayloStoychev , it seems you have multiple exports above, could you try removing the export statement from export function generateCustomLayoutSimpleMeta so it becomes function generateCustomLayoutSimpleMeta

It should look like this...

function generateCustomLayoutSimpleMeta(summaryResults: { meta: string | any[]; failed: number; tests: string | any[]; }) {
   ...
   ...
}
exports.generateCustomLayoutSimpleMeta = generateCustomLayoutSimpleMeta;

[IvayloStoychev]

@ryanrosello-og Thanks for the update. After I update my slack reporter to the latest version: "playwright-slack-report": "^1.1.70", the slack message is working as expected.