Replace cypress with playwright (#1988)

## Launch Checklist

This PR replaces cypress with playwright.
<img width="1907" height="933" alt="image"
src="https://github.com/user-attachments/assets/b52075b3-eb3b-45dc-93dc-8c5e9cfd35dd"
/>

I hope this will make the end-to-end debugging and fixing easier due to
the async await support of playwright which is missing in cypress.

This is a pure refactoring change.

 - [x] Briefly describe the changes in this PR.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Harel M
2026-07-10 21:18:48 +03:00
committed by GitHub
parent c24049cb88
commit 2e0b7cdb8c
43 changed files with 2282 additions and 4262 deletions
+31 -25
View File
@@ -1,42 +1,48 @@
import { test, describe, beforeEach } from "./utils/fixtures";
import { MaputnikDriver } from "./maputnik-driver";
const test = it;
describe("accessibility", () => {
const { beforeAndAfter, get, when, then } = new MaputnikDriver();
beforeAndAfter();
const { given, get, when, then } = new MaputnikDriver();
beforeEach(async () => {
await given.setupMockBackedResponses();
await when.setStyle("both");
});
describe("skip links", () => {
beforeEach(() => {
when.setStyle("layer");
beforeEach(async () => {
await when.setStyle("layer");
});
test("skip link to layer list", () => {
test("skip link to layer list", async () => {
const selector = "root:skip:layer-list";
then(get.elementByTestId(selector)).shouldExist();
when.tab();
then(get.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
then(get.skipTargetLayerList()).shouldBeFocused();
await then(get.elementByTestId(selector)).shouldExist();
await when.tab();
await then(get.elementByTestId(selector)).shouldBeFocused();
await when.click(selector);
await then(get.skipTargetLayerList()).shouldBeFocused();
});
test("skip link to layer editor", () => {
test("skip link to layer editor", async () => {
const selector = "root:skip:layer-editor";
then(get.elementByTestId(selector)).shouldExist();
then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
when.tab().tab();
then(get.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
then(get.skipTargetLayerEditor()).shouldBeFocused();
await then(get.elementByTestId(selector)).shouldExist();
await then(get.elementByTestId("skip-target-layer-editor")).shouldExist();
await when.tab();
await when.tab();
await then(get.elementByTestId(selector)).shouldBeFocused();
await when.click(selector);
await then(get.skipTargetLayerEditor()).shouldBeFocused();
});
test("skip link to map view", () => {
test("skip link to map view", async () => {
const selector = "root:skip:map-view";
then(get.elementByTestId(selector)).shouldExist();
when.tab().tab().tab();
then(get.elementByTestId(selector)).shouldBeFocused();
when.click(selector);
then(get.canvas()).shouldBeFocused();
await then(get.elementByTestId(selector)).shouldExist();
await when.tab();
await when.tab();
await when.tab();
await then(get.elementByTestId(selector)).shouldBeFocused();
await when.click(selector);
await then(get.canvas()).shouldBeFocused();
});
});
});