fix: run Playwright tests in all browsers

[radium-v]

Pull Request

📖 Description

This PR updates the Playwright config in fast-foundation to run tests in Firefox and Webkit.

This PR also updates Playwright to the latest version, 1.40.1. The custom hasAttribute function has been replaced with Playwright's built-in toHaveAttribute function, which now allows for checking the existence of an attribute without specifying a value.

Some toolbar tests were failing, so I added a focus() method as a workaround.

👩‍💻 Reviewer Notes

Some tests for Design Tokens are failing only in Webkit, so they're skipped for now. Toolbar tests were also failing in Firefox and Webkit, though I couldn't identify if this is a problem with Playwright or with our component. This may be related to these bugs:

• [BUG] incorrect focus behavior for webcomponents with delegate focus option playwright#2510
• [BUG] webkit waits for elements until timeout playwright#24403
• [Feature] Allow the app under test to have the "real" focus of the browser. playwright#23305

📑 Test Plan

All tests should pass as expected.

Toolbar adds a focus() method, but it's marked as @internal.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

[bheston]

Thanks for this update. I'm interested to know what is failing in Safari and to make sure we can figure that out because I feel that one of the benefits of a library like this is that it solves these cross-platform issues. I haven't seen any mention of actual bugs with tokens, but it would be really nice if we knew it was working via tests as well.

Regarding the delegates focus comments, we recently removed that from the registration on Adaptive Web Components. Many of the components are not best served with the current capabilities of this model. For instance, if there is extra whitespace on a custom element, the whole area causes a focus anyway. This was most prominent in the area to the right of the label above an input like on Text Field. We added a focus override to correctly place focus. At least in Foundation this is only part of the test infrastructure and not the export.

[bheston]

It looks like there are some issues in the Calendar tests in Webkit now. It seems to be adding characters to the year portion for some locale tests. Maybe we just check that the result contains the number we're expecting instead.

I suspect the timeouts are spurious, though I still wish there were a way around this.

[radium-v]

In order to get this PR to pass, I had to set up the build toolchain on Windows to address a Calendar bug. This bug only happens on newer versions of Webkit on Windows. I had to include it with this PR since the bug doesn't appear on the main branch.

There's also a problem when using the most recent version of Playwright in fast-ssr - the style tests which check that the background-color gets set properly on the card components returns rgba(0, 0, 0, 0) instead of rgb(26, 26, 26). I don't know why this bug is happening, so if someone with a better understanding of how fast-ssr works could investigate the issue in the future, that would be awesome.

[radium-v]

Converting this back to a draft to split out some of the work.