[Bug] When running visual tests in playwright - Expected snapshot not included in monocart-report

[craitose]

Describe the bug Running Visual tests in playwright that compares snapshots and there if the difference between the expected snapshot and the actual snapshot the test will fail and a report will be generated. In the mono-cart report there 3 tabs under the attachments section [Diff, Actual, Expected], images are displayed when the Diff & Actual tabs are clicked but not when the Expected tab is clicked. The expected.png file is present in the test-results folder but is not linked to the report.

To Reproduce

• Version: 2.4.7
• Node Version: 20.9.0
• Playwright : 1.41.2
• Have you tried the latest version (including node), and does the issue still exist?
• Steps to reproduce the actual behavior:
  1. Run a visual comparison test in Playwright that will fail.
  2. After the test fails , read the report
  3. In the Attachments section click on the expected tab

Expected behavior When the mono-cart report is open and the user clicks on the expected tab under the attachments section - the expected.png image should display

Errors or Screenshots Any captured error messages, or add screenshots to help explain your problem.

Make a minimal reproduction

• Provide the minimal, reproducible code and options of the bug.

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('http://graylon-everett.pixpa.com/');
  await expect(page).toHaveScreenshot("fashion-page.png").catch(() => {});
  console.log("screenshot captured");
  console.log("site migrated to new host");
   await page.goto('https://www.pinterest.com/graylone/');
  await expect(page).toHaveScreenshot("fashion-page.png"); 
});

• Or provide a GitHub repository with a minimal (but complete) example and simple/clear steps on how to reproduce the bug.

The simpler you can make it, the more likely we are to successfully verify and fix the bug.

Additional context Add any other context about the problem here. The expected image is renamed fashion-page-expected.png-1 yet the image is displayed in playwright's native reporter

[craitose]

I closed this prematurely , it the expected png gets named incorrectly and the path link is not set correct in the report. please look into this.

[cenfun]

@craitose I can't reproduce it with latest version (2.4.7) Can you upgrade to the latest version? Or anything I missed?

[craitose]

I have updated the test code, could you try again on the latest version?

[cenfun]

@craitose I'm still unable to reproduce. Can you provide any screenshots regarding the problem?

[craitose]

@cenfun Sorry, I forgot to make the test fail, I have updated the test code and uploaded a screenshot of the issue.

[cenfun]

@craitose I can not reproduce. Anyway, I post the test case to here: https://github.com/cenfun/monocart-reporter-examples/tree/main/tests/visual and the screenshot:

• Windows 10 + Node.js v20.12.2
• Playwright Test v1.44.1
• Monocart Reporter v2.4.9

[cenfun]

Seems the issue is similar to #67 Could you please check it and find if anything can help?

Or try to update the playwright to v1.44 and update the monocart-reporter to v2.4.9.

Check the image src and make sure the image file is exists in your local dir

[craitose]

Thanks @cenfun, I have just checked the generated screen shots. These are what I saw in the folder [fashion-page-1-actual.png, fashion-page-1-diff.png, fashion-page-expected.png] . I then updated playwright to 1.44.1 and fashion-page-1-expected.png is now being generated.