#8990: fix non-awaited screenshot promise

[fungairino]

What does this PR do?

• Fixes Image crop brick does not appear in form #8990

Discussion

• This PR introduces screenshot testing in our e2e playwright tests. Right now the max diff is set to 0.1 (so if the image is more than 10% different, it will fail the test).
  • Opted for consistency to instead just check to see if the image has a rendered width

Checklist

• Added jest or playwright tests and/or storybook stories

[fungairino]

We should no longer need this work-around since we removed this bit of code that detects if the sidebar is open based on the window inner width.

[fungairino]

Side note: this should probably correspond to the output schema directly

[github-actions]

No loom links were found in the first post. Please add one there if you'd like to it to appear on Slack.

Do not edit this comment manually.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 74.39%. Comparing base (8318d74) to head (9dfea56).
Report is 174 commits behind head on main.

Files	Patch %	Lines
src/bricks/transformers/screenshotTab.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9004      +/-   ##
==========================================
+ Coverage   74.24%   74.39%   +0.14%     
==========================================
  Files        1332     1353      +21     
  Lines       40817    41898    +1081     
  Branches     7634     7828     +194     
==========================================
+ Hits        30306    31168     +862     
- Misses      10511    10730     +219     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Playwright test results

 121 passed
 3 flaky
 6 skipped

Details

 Open report ↗︎
 130 tests across 44 suites
 1 hour, 35 minutes, 32 seconds
 9dfea56
 For more information on how to debug and view this report, see our readme

Flaky tests

chrome › tests/pageEditor/addStarterBrick.spec.ts › Add starter brick to mod
msedge › tests/pageEditor/addStarterBrick.spec.ts › Add starter brick to mod
chrome › tests/regressions/welcomeStarterBricks.spec.ts › #8740: can view the starter mods on the pixiebrix.com/welcome page

Skipped tests

chrome › tests/regressions/doNotCloseSidebarOnPageEditorSave.spec.ts › #8104: Do not automatically close the sidebar when saving in the Page Editor
msedge › tests/regressions/doNotCloseSidebarOnPageEditorSave.spec.ts › #8104: Do not automatically close the sidebar when saving in the Page Editor
chrome › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options
msedge › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options
chrome › tests/runtime/insertAtCursor.spec.ts › Insert at Cursor › 8154: can insert at cursor after opening sidebar from selection menu
msedge › tests/runtime/insertAtCursor.spec.ts › Insert at Cursor › 8154: can insert at cursor after opening sidebar from selection menu

[grahamlangford]

Didn't know playwright had screenshot testing built in by default. That required a 3rd party plugin in Cypress. Nice!

[grahamlangford]

Looks like screenshot tests might have cross-browser compatibility issues? That's not surprising, though I thought Chrome/Edge would be similar enough.

We might want to limit those to just Chrome unless you can create screenshots for both browsers?

[fungairino]

Looks like screenshot tests might have cross-browser compatibility issues? That's not surprising, though I thought Chrome/Edge would be similar enough.
We might want to limit those to just Chrome unless you can create screenshots for both browsers?

We can create screenshots for both browsers by adding the browserName to the snapshot, but for now I'd rather defer trying to handle this more generally and just check to see if there is any rendered image where expected (the actual visual look of this particular image isn't really that relevant)