ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-07-13 01:17:26 +00:00
Code Issues Projects Releases Wiki Activity

Replace cypress with playwright (#1988)

Browse Source 
## 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
Download Patch File Download Diff File Expand all files Collapse all files
e2e/modal-driver.ts
+23 -25
View File
@@ -1,40 +1,38 @@
import { v1 as uuid } from "uuid";
import MaputnikCypressHelper from "./maputnik-cypress-helper";
import { PlaywrightHelper } from "./playwright-helper";
export default class ModalDriver {
private helper = new MaputnikCypressHelper();
export class ModalDriver {
private readonly helper = new PlaywrightHelper();
public when = {
fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
// Having logic in test code is an anti pattern.
// This should be split to multiple single responsibility functions
const type = opts.type;
const layer = opts.layer;
let id;
if (opts.id) {
id = opts.id;
} else {
id = `${type}:${uuid()}`;
}
this.helper.when.selectOption("add-layer.layer-type.select", type);
this.helper.when.type("add-layer.layer-id.input", id);
fillLayers: async (opts: { type: string; layer?: string; id?: string }) => {
const { when, get, then } = this.helper;
const id = opts.id ?? `${opts.type}:${uuid()}`;
if (layer) {
this.helper.when.doWithin(() => {
this.helper.get.element("input").clear().type(layer!);
}, "add-layer.layer-source-block");
await when.select("add-layer.layer-type.select", opts.type);
await when.type("add-layer.layer-id.input", id);
if (opts.layer) {
const input = get.elementByTestId("add-layer.layer-source-block").locator("input");
await input.click();
await input.fill(opts.layer);
// The source input is a controlled downshift combobox; wait for React to
// settle on the typed value before submitting.
await then(input).shouldHaveValue(opts.layer);
// Close the autocomplete menu so it does not intercept the add button.
await get.elementByTestId("add-layer.layer-id.input").click();
}
this.helper.when.click("add-layer");
await when.click("add-layer");
return id;
},
open: () => {
this.helper.when.click("layer-list:add-layer");
open: async () => {
await this.helper.when.click("layer-list:add-layer");
},
close: (key: string) => {
this.helper.when.click(key + ".close-modal");
close: async (key: string) => {
await this.helper.when.click(key + ".close-modal");
},
};
}