test(menu): migrate to playwright

[brandyscarney]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe): Playwright migration

Some quirks I ran into during the test migration:

• Firefox does not properly tab to the button here unless you press tab twice, so I am skipping Firefox for the focus tests

• Safari does not behave the same as Chrome and Firefox in the following two cases:

  • After dismissing the modal it returns focus to the body instead of the button that was used to open it as seen here
  • It doesn't transfer focus from the modal to a button inside of the modal after clicking on it as seen here

• The focus trap behavior only works if the button is inside of an item as seen here:

  works:

  <ion-item>
    <ion-button id="start-menu-button">Button</ion-button>
  </ion-item>

  does not work:

  <ion-button id="start-menu-button">Button</ion-button>

  I don't know if this is the expected behavior but since this is how the test has previously worked I didn't change it.

[averyjohnston]

Don't forget to run the screenshot update job 👀