Mobile notification doesn't follow custom layout

[azad-resolver]

Bug description

Notifications of the Slack mobile app don't follow the custom layout as they do in Slack itself.

It always looks like this:

Even if, for example, flaky and skipped tests were not part of the custom layout (or had different icons), it would still show those exact four icons in the mobile notification.

How to reproduce (please include a snippet of your Playwright Slack Reporter configuration)

1. Run a bunch of tests
2. Check the notification from the Slack mobile app

Expected behavior

The mobile notification follows the custom layout as closely as possible.

Environment & setup

• OS: Debian (Jenkins agent)
• Node.js version: v18.18.0

Our custom layout:

import {Block, KnownBlock} from '@slack/types'
import {SummaryResults} from 'playwright-slack-report/dist/src'

export async function slackReporterLayout(summaryResults: SummaryResults, slackUser: string): Promise<Array<KnownBlock | Block>> {
  const meta: {type: string; text: {type: string; text: string}}[] = []
  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: `*${key}*: \`${value}\``,
        },
      })
    }
  }
  const testExecutionText = process.env.TEST_EXECUTION_KEY ? `<https://xyz.atlassian.net/browse/${process.env.TEST_EXECUTION_KEY}|${process.env.TEST_EXECUTION_KEY}>` : '`No JIRA ticket was provided`'
  const websiteUrl = (process.env.WEBSITE_URL || '').trim()

  return [
    {
      type: 'divider',
    },
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text:
          summaryResults.failed === 0
            ? `:tada-yay2: All ${summaryResults.tests.length} tests passed!`
            : `:white_check_mark: ${summaryResults.passed} | :ballot_box_with_check: ${summaryResults.flaky} | :x: ${summaryResults.failed} | :fast_forward: ${summaryResults.skipped}`,
      },
      fields: [
        {
          type: 'mrkdwn',
          text: `*Tests*\n\`${process.env.TEST_TYPE_VALUE}\``,
        },
        {
          type: 'mrkdwn',
          text: `*Branch*\n<https://github.com/xyz/playwright/tree/${process.env.BRANCH}|${process.env.BRANCH}>`,
        },
        {
          type: 'mrkdwn',
          text: `*Xray Test Execution*\n${testExecutionText}`,
        },
        {
          type: 'mrkdwn',
          text: `*Test Results*\n<https://qe-jenkins.staging.xyz.com/job/playwright/${process.env.JENKINS_BUILD_NUMBER}/Playwright-Test-Report/|Playwright Test Report (#${process.env.JENKINS_BUILD_NUMBER})>`,
        },
        {
          type: 'mrkdwn',
          text: `*Deployment Version*\n\`${process.env.DEPLOYMENT_VERSION ?? 'Version not found'}\``,
        },
        {
          type: 'mrkdwn',
          text: `*User*\n${slackUser}`,
        },
      ],
    },
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: `*Server*\n<${websiteUrl}|${websiteUrl}>`,
      },
    },

    ...meta,
    {
      type: 'divider',
    },
  ]
}

playwright-slack-report version

v1.1.89

[ryanrosello-og]

hey @azad-resolver, currently it uses a default layout and ignores custom layout:

playwright-slack-report/src/LayoutGenerator.ts

Line 100 in 5bf02f4

const generateFallbackText = (summaryResults: SummaryResults): string => `✅ ${summaryResults.passed} ❌ ${summaryResults.failed} ${

This is intended because there is not much real estate on the mobile notifications - see implementation here => #67

[azad-resolver]

hey @azad-resolver, currently it uses a default layout and ignores custom layout:

playwright-slack-report/src/LayoutGenerator.ts

Line 100 in 5bf02f4

const generateFallbackText = (summaryResults: SummaryResults): string => `✅ ${summaryResults.passed} ❌ ${summaryResults.failed} ${

This is intended because there is not much real estate on the mobile notifications - see implementation here => #67

Ah gotcha! That's understandable of course.
In our case, we use almost the same 4 icons, only with one difference and different order, and just a congratulatory message if all tests were passed:

At first I was thinking it could try to use only the first line of the custom layout if that already includes a results overview but that would probably become too convoluted to check (what qualifies as an overview and what doesn't?).
So it makes sense to use the default layout.

But what if there was a feature that allows to create a separate mobile custom layout, could that be an option in the future?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.