PLANET-7691 Upgrade Playwright to latest version

[mleray]

Description

See PLANET-7691

Changes:

The actual upgrade didn't require a lot of changes, so I took the opportunity to improve our tests:

• Replaced deprecated type function with fill
• Cleaned up code (unused parameters, functions, etc)
• Simplified the Covers test since it only has the "Take Action" style now
• Updated some of the slowest tests: Articles, Carousel Header, Related Posts

Testing

On local it should be enough to run npm i --legacy-peer-deps, but if not you can first clean up and re-install:

• npm uninstall @playwright/test && npm uninstall @wordpress/e2e-test-utils-playwright
• npm i --legacy-peer-deps
• npx playwright install

You can check which version you are running using npx playwright --version

[planet-4]

Test instance is ready 🚀

🌑 leda | admin | blocks report | CircleCI | composer-local.json

⌚ 2025.01.28 14:27:57

[GP-Dan-Tovbein]

Code looks good to me! However, I'm getting too many specs failing on my local

  Slow test file: [firefox] › greenpeace-media.spec.js (30.9s)
  Slow test file: [firefox] › blocks/carousel-header.spec.js (29.3s)
  Slow test file: [chromium] › greenpeace-media.spec.js (28.5s)
  Slow test file: [firefox] › blocks/covers-take-action.spec.js (22.5s)
  Slow test file: [firefox] › blocks/spreadsheet.spec.js (20.4s)
  Consider splitting slow test files to speed up parallel execution
  32 failed
    [chromium] › gravity-forms.spec.js:55:7 › Gravity Forms tests › check the confirmation message, text type 
    [chromium] › password-protected-content.spec.js:9:5 › check password protected content ─────────
    [chromium] › search.spec.js:6:5 › check search works ───────────────────────────────────────────
    [firefox] › gravity-forms.spec.js:55:7 › Gravity Forms tests › check the confirmation message, text type 
    [firefox] › password-protected-content.spec.js:9:5 › check password protected content ──────────
    [firefox] › search.spec.js:6:5 › check search works ────────────────────────────────────────────
    [webkit] › 404.spec.js:3:5 › check the 404 page ────────────────────────────────────────────────
    [webkit] › blocks/articles.spec.js:11:5 › Test Articles block ──────────────────────────────────
    [webkit] › blocks/carousel-header.spec.js:51:5 › Create and check carousel header block ────────
    [webkit] › blocks/columns-icons.spec.js:7:5 › Test Columns block with Icons style ──────────────
    [webkit] › blocks/columns-images.spec.js:7:5 › Test Columns block with Images style ────────────
    [webkit] › blocks/columns-no-image.spec.js:7:5 › Test Columns block with No Image style ────────
    [webkit] › blocks/columns-tasks.spec.js:7:5 › Test Columns block with Tasks style ──────────────
    [webkit] › blocks/covers-take-action.spec.js:7:5 › Test Covers block with Take Action covers style 
    [webkit] › blocks/spreadsheet.spec.js:10:5 › Test Spreadsheet block ────────────────────────────
    [webkit] › blocks/take-action-boxout.spec.js:21:7 › Test Take Action Boxout block › Take Action Boxout with existing page 
    [webkit] › blocks/take-action-boxout.spec.js:38:7 › Test Take Action Boxout block › Take Action Boxout with custom fields 
    [webkit] › blocks-report-api.spec.js:3:5 › Test Blocks report API ──────────────────────────────
    [webkit] › comments.spec.js:5:5 › Test adding a Comment to a Post ──────────────────────────────
    [webkit] › cookies-banner.spec.js:3:5 › check cookies banner ───────────────────────────────────
    [webkit] › country-selector.spec.js:3:5 › check the country selector behaviour ─────────────────
    [webkit] › footer.spec.js:5:5 › check footer menu ──────────────────────────────────────────────
    [webkit] › gallery.spec.js:7:5 › Test Gallery basic functionalities ────────────────────────────
    [webkit] › gravity-forms.spec.js:55:7 › Gravity Forms tests › check the confirmation message, text type 
    [webkit] › greenpeace-media.spec.js:13:7 › Greenpeace Media tests › import an image to the Library using a search term 
    [webkit] › greenpeace-media.spec.js:40:7 › Greenpeace Media tests › bulk select and upload two images using identifiers 
    [webkit] › navigation-bar.spec.js:5:5 › Test navigation bar menu ───────────────────────────────
    [webkit] › page-layouts-modal.spec.js:5:5 › checks if the welcome modal on the editor is present and closed when the button is clicked 
    [webkit] › password-protected-content.spec.js:9:5 › check password protected content ───────────
    [webkit] › related-posts.spec.js:6:5 › Test Related Posts block ────────────────────────────────
    [webkit] › search.spec.js:6:5 › check search works ─────────────────────────────────────────────
    [webkit] › special-pages.spec.js:5:5 › Test special pages (Act and Explore) ────────────────────
  9 did not run
  47 passed (8.1m)

[mleray]

Code looks good to me! However, I'm getting too many specs failing on my local

@GP-Dan-Tovbein is that also the case in the main branch? For the search test, it might be because by default ElasticSearch is not running on local 🤔 For the others, is it timeout problems?