diff --git a/jest-playwright.config.js b/jest-playwright.config.js
index 11771aa18..2c7898b5d 100644
--- a/jest-playwright.config.js
+++ b/jest-playwright.config.js
@@ -11,5 +11,5 @@ module.exports = {
connectOptions: {
slowMo: 250,
},
- browsers: ["chromium"],
+ browsers: ["chromium","firefox"],
}
diff --git a/jest.config.js b/jest.config.js
index b4cf5d5cf..f198a13c2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,5 @@
module.exports = {
-// testTimeout: 300000, // 5 min for debugging
+ // testTimeout: 300000, // 5 min for debugging
projects: [
{
displayName: "UNIT Testing",
diff --git a/package-lock.json b/package-lock.json
index 6c3bbfda5..205b5f988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@maps4html/web-map-custom-element",
- "version": "0.8.3",
+ "version": "0.9.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -6414,6 +6414,12 @@
"@sideway/pinpoint": "^2.0.0"
}
},
+ "jpeg-js": {
+ "version": "0.4.3",
+ "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
+ "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==",
+ "dev": true
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7509,12 +7515,62 @@
}
},
"playwright": {
- "version": "1.16.3",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.16.3.tgz",
- "integrity": "sha512-nfJx/OpIb/8OexL3rYGxNN687hGyaM3XNpfuMzoPlrekURItyuiHHsNhC9oQCx3JDmCn5O3EyyyFCnrZjH6MpA==",
+ "version": "1.17.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.17.1.tgz",
+ "integrity": "sha512-DisCkW9MblDJNS3rG61p8LiLA2WA7IY/4A4W7DX4BphWe/HuWjKmGQptuk4NVIh5UuSwXpW/jaH2+ZgjHs3GMA==",
"dev": true,
"requires": {
- "playwright-core": "=1.16.3"
+ "playwright-core": "=1.17.1"
+ },
+ "dependencies": {
+ "commander": {
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+ "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+ "dev": true
+ },
+ "debug": {
+ "version": "4.3.3",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+ "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+ "dev": true,
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
+ "playwright-core": {
+ "version": "1.17.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.17.1.tgz",
+ "integrity": "sha512-C3c8RpPiC3qr15fRDN6dx6WnUkPLFmST37gms2aoHPDRvp7EaGDPMMZPpqIm/QWB5J40xDrQCD4YYHz2nBTojQ==",
+ "dev": true,
+ "requires": {
+ "commander": "^8.2.0",
+ "debug": "^4.1.1",
+ "extract-zip": "^2.0.1",
+ "https-proxy-agent": "^5.0.0",
+ "jpeg-js": "^0.4.2",
+ "mime": "^2.4.6",
+ "pngjs": "^5.0.0",
+ "progress": "^2.0.3",
+ "proper-lockfile": "^4.1.1",
+ "proxy-from-env": "^1.1.0",
+ "rimraf": "^3.0.2",
+ "socks-proxy-agent": "^6.1.0",
+ "stack-utils": "^2.0.3",
+ "ws": "^7.4.6",
+ "yauzl": "^2.10.0",
+ "yazl": "^2.5.1"
+ }
+ },
+ "rimraf": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+ "dev": true,
+ "requires": {
+ "glob": "^7.1.3"
+ }
+ }
}
},
"playwright-core": {
diff --git a/package.json b/package.json
index 488a16d52..f4c38a0af 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"jest-playwright-preset": "^1.7.0",
"leaflet": "^1.7.1",
"path": "^0.12.7",
- "playwright": "^1.16.3",
+ "playwright": "^1.17.0",
"proj4": "^2.6.2",
"proj4leaflet": "^1.0.2",
"rollup": "^2.23.1"
diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js
index 0b57019a6..2ccd87cc5 100644
--- a/src/mapml/handlers/ContextMenu.js
+++ b/src/mapml/handlers/ContextMenu.js
@@ -103,7 +103,6 @@ export var ContextMenu = L.Handler.extend({
},
];
this._mapMenuVisible = false;
- this._keyboardEvent = false;
this._container = L.DomUtil.create("div", "mapml-contextmenu", map._container);
@@ -418,13 +417,14 @@ export var ContextMenu = L.Handler.extend({
if(!elem.layer.validProjection) return;
this._layerClicked = elem;
this._showAtPoint(e.containerPoint, e, this._layerMenu);
+ this._layerMenu.firstChild.focus();
} else if(elem.classList.contains("leaflet-container") || elem.classList.contains("mapml-debug-extent") ||
elem.tagName === "path") {
this._layerClicked = undefined;
this._showAtPoint(e.containerPoint, e, this._container);
+ this._container.firstChild.focus();
}
if(e.originalEvent.button === 0 || e.originalEvent.button === -1){
- this._keyboardEvent = true;
if(this._layerClicked){
let activeEl = document.activeElement;
this._elementInFocus = activeEl.shadowRoot.activeElement;
@@ -439,8 +439,6 @@ export var ContextMenu = L.Handler.extend({
_showAtPoint: function (pt, data, container) {
if (this._items.length) {
- let event = L.extend(data || {}, {contextmenu: this});
-
this._showLocation = {
containerPoint: pt
};
@@ -455,8 +453,6 @@ export var ContextMenu = L.Handler.extend({
container.style.display = 'block';
this._mapMenuVisible = true;
}
-
- this._map.fire('contextmenu.show', event);
}
},
@@ -625,7 +621,7 @@ export var ContextMenu = L.Handler.extend({
menu.style.top = 100 + 'px';
menu.style.bottom = 'auto';
}
- if(this._keyboardEvent)menu.firstChild.focus();
+ menu.firstChild.focus();
},
_hideCoordMenu: function(e){
diff --git a/test/e2e/core/axisInferring.test.js b/test/e2e/core/axisInferring.test.js
index 127b614ba..30ed1b52b 100644
--- a/test/e2e/core/axisInferring.test.js
+++ b/test/e2e/core/axisInferring.test.js
@@ -37,11 +37,18 @@ describe("UI Drag&Drop Test", () => {
});
test("GCRS inferring", async () => {
+ const EPSILON = 0.0000001;
+ const expectedTopLeftLongitude = -92.0;
+ const expectedTopLeftLatitude = 52.999999999993484;
+ const expectedBottomRightLongitude = -62.0;
+ const expectedBottomRightLatitude = 33.99999999999964;
const layerExtent = await page.$eval(
"body > map > layer-:nth-child(4)",
(layer) => layer.extent
);
- await expect(layerExtent.topLeft.gcrs).toEqual({ horizontal: -92, vertical: 52.999999999993484 });
- await expect(layerExtent.bottomRight.gcrs).toEqual({ horizontal: -62, vertical: 33.99999999999964 });
+ await expect(Math.abs(layerExtent.topLeft.gcrs.horizontal - expectedTopLeftLongitude) < EPSILON);
+ await expect(Math.abs(layerExtent.topLeft.gcrs.vertical - expectedTopLeftLatitude) < EPSILON);
+ await expect(Math.abs(layerExtent.bottomRight.gcrs.horizontal - expectedBottomRightLongitude) < EPSILON);
+ await expect(Math.abs(layerExtent.bottomRight.gcrs.vertical - expectedBottomRightLatitude) < EPSILON);
});
});
diff --git a/test/e2e/core/featureLinks.html b/test/e2e/core/featureLinks.html
index 18dddcffd..c7be62cac 100644
--- a/test/e2e/core/featureLinks.html
+++ b/test/e2e/core/featureLinks.html
@@ -41,7 +41,7 @@
}
-
+
Accessible Square
Test
@@ -49,17 +49,17 @@ Test
- 11 11 12 11 12 12 11 12 11 11
+ 11 11 12 11 12 12 11 12 11 11
-
+
Test
-
+
257421 -3567196 -271745 1221771 -3896544 242811 -3183549 -2613313
@@ -73,7 +73,7 @@ Test
Test
-
+
2771 3106 2946 3113 2954 3210 2815 3192
@@ -92,12 +92,12 @@ Test
Test
-
+
9 10 10 10 10 11 9 11 9 10
-
+
10.5 11
@@ -111,12 +111,12 @@ Test
Test
-
+
9 10 10 10 10 11 9 11 9 10
-
+
10.5 11
@@ -130,7 +130,7 @@ Test
Test
-
+
10.5 11 10.75 11 10.75 11.25 10.5 11.25 10.5 11
diff --git a/test/e2e/core/featureLinks.test.js b/test/e2e/core/featureLinks.test.js
index 85e89c92e..898733ec9 100644
--- a/test/e2e/core/featureLinks.test.js
+++ b/test/e2e/core/featureLinks.test.js
@@ -14,77 +14,56 @@ describe("Playwright Feature Links Tests", () => {
await page.waitForTimeout(200);
}
await page.keyboard.press("Enter");
- await page.waitForTimeout(1000);
- const layers = await page.$eval(
- "body > map",
- (map) => map.childElementCount
- );
- await expect(layers).toEqual(4);
+ const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+ await expect(layers).toEqual(2);
});
test("Sub-point inplace link adds new layer, parent feature has separate link", async () => {
- await page.hover(".leaflet-top.leaflet-right");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
- await page.waitForTimeout(850);
+ await page.goto(PATH + "featureLinks.html");
+ const initialLayerCount = await page.evaluate(`document.querySelectorAll('layer-').length`);
+ await expect(initialLayerCount).toEqual(1);
await page.click("body > map");
for(let i = 0; i < 6; i++) {
- await page.keyboard.press("Tab");
+ await page.keyboard.press("Tab");
await page.waitForTimeout(200);
}
const extentBeforeLink = await page.$eval(
"body > map",
(map) => map.extent
);
+ // activate link from id="tabstop-six", is supposed to be added to top of map
await page.keyboard.press("Enter");
- const layers = await page.$eval(
- "body > map",
- (map) => map.childElementCount
- );
- await page.waitForTimeout(1000);
- const layerName = await page.$eval(
- "//html/body/map/layer-[2]",
- (layer) => layer.label
- )
+ const layerName = await page.evaluate(`document.querySelectorAll('layer-')[1].label`);
+ const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+ await expect(layers).toEqual(2);
+ await expect(layerName).toEqual("Fire Danger (forecast)");
const extentAfterLink = await page.$eval(
"body > map",
(map) => map.extent
);
-
await expect(extentAfterLink.topLeft.gcrs).toEqual(extentBeforeLink.topLeft.gcrs);
await expect(extentAfterLink.bottomRight.gcrs).toEqual(extentBeforeLink.bottomRight.gcrs);
- await expect(layers).toEqual(4);
- await expect(layerName).toEqual("Fire Danger (forecast)");
});
});
describe("Main Part Link Tests", () => {
test("Main part adds new layer", async () => {
- await page.hover(".leaflet-top.leaflet-right");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
- await page.waitForTimeout(850);
+ await page.goto(PATH + "featureLinks.html");
await page.click("body > map");
for(let i = 0; i < 5; i++) {
await page.keyboard.press("Tab");
await page.waitForTimeout(200);
}
await page.keyboard.press("Enter");
- const layers = await page.$eval(
- "body > map",
- (map) => map.childElementCount
- );
- await page.waitForTimeout(1000);
- const layerName = await page.$eval(
- "//html/body/map/layer-[2]",
- (layer) => layer.label
- )
+ const layers = await page.evaluate(`document.querySelectorAll('layer-').length`);
+ await expect(layers).toEqual(2);
+ const layerName = await page.evaluate(`document.querySelectorAll('layer-')[1].label`);
+ await expect(layerName).toEqual("Canada Base Map - Geometry");
const extent = await page.$eval(
"body > map",
(map) => map.extent
);
-
await expect(extent.topLeft.gcrs).toEqual({horizontal:-129.071567338887, vertical:36.4112695268206});
await expect(extent.bottomRight.gcrs).toEqual({horizontal:26.18468754289824, vertical:2.850936151427951});
- await expect(layers).toEqual(4);
- await expect(layerName).toEqual("Canada Base Map - Geometry");
});
});
});
\ No newline at end of file
diff --git a/test/e2e/core/layerContextMenu.test.js b/test/e2e/core/layerContextMenu.test.js
index ff18a23fb..b8d6aaf69 100644
--- a/test/e2e/core/layerContextMenu.test.js
+++ b/test/e2e/core/layerContextMenu.test.js
@@ -8,10 +8,10 @@ describe("Playwright Layer Context Menu Tests", () => {
});
test("Layer context menu shows when layer is clicked", async () => {
- await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span",
- { button: "right" });
-
+ await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div", {force: true});
+ await page.click(" .mapml-layer-item:nth-child(1) button[title='Layer Settings']", { button: "right", force: true});
+ await page.waitForSelector(".mapml-contextmenu.mapml-layer-menu",{state: 'visible'});
+
const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
const resultHandle = await page.evaluateHandle(root => root.querySelector(".mapml-contextmenu.mapml-layer-menu"), nextHandle);
@@ -33,10 +33,10 @@ describe("Playwright Layer Context Menu Tests", () => {
await expect(copyValue).toEqual("");
});
- test("Map zooms in to layer 2", async () => {
- await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > label > span",
- { button: "right" });
+ test("Use Layer context menu to zoom in to disabled layer", async () => {
+ await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div", {force: true});
+ await page.click("div .mapml-layer-item:nth-child(2) button[title='Layer Settings']",{ button: "right", force: true});
+ await page.waitForSelector(".mapml-contextmenu.mapml-layer-menu",{state: 'visible'});
await page.keyboard.press("z");
await page.waitForTimeout(1000);
const mapLocation = await page.$eval(
@@ -53,14 +53,14 @@ describe("Playwright Layer Context Menu Tests", () => {
await expect(mapLocation).toEqual({ max: { x: 43130, y: 43130 }, min: { x: 42630, y: 42630 } });
});
- test("Map zooms out to layer 3", async () => {
+ test("Use Layer context menu to zoom in to disabled layer", async () => {
for (let i = 0; i < 5; i++) {
await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in");
await page.waitForTimeout(200);
}
- await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(3) > div:nth-child(1) > label > span",
- { button: "right" });
+ await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div", {force: true});
+ await page.click("div .mapml-layer-item:nth-child(3) button[title='Layer Settings']",{ button: "right", force: true});
+ await page.waitForSelector(".mapml-contextmenu.mapml-layer-menu",{state: 'visible'});
await page.keyboard.press("z");
await page.waitForTimeout(1000);
const mapLocation = await page.$eval(
@@ -76,28 +76,4 @@ describe("Playwright Layer Context Menu Tests", () => {
await expect(mapZoom).toEqual(11);
await expect(mapLocation).toEqual({ max: { x: 43130, y: 43557 }, min: { x: 42630, y: 43057 } });
});
-
- test("Map zooms out to layer 4", async () => {
- for (let i = 0; i < 5; i++) {
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in");
- await page.waitForTimeout(200);
- }
- await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div");
- await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(4) > div:nth-child(1) > label > span",
- { button: "right" });
- await page.keyboard.press("z");
- await page.waitForTimeout(1000);
- const mapLocation = await page.$eval(
- "body > mapml-viewer",
- (text) => text._map.getPixelBounds()
- );
-
- const mapZoom = await page.$eval(
- "body > mapml-viewer",
- (text) => text._map.getZoom()
- );
-
- await expect(mapZoom).toEqual(5);
- await expect(mapLocation).toEqual({ max: { x: 8084, y: 8084 }, min: { x: 7584, y: 7584 } });
- });
});
\ No newline at end of file
diff --git a/test/e2e/core/reticle.test.js b/test/e2e/core/reticle.test.js
index b3d2a8ed2..ab39f793f 100644
--- a/test/e2e/core/reticle.test.js
+++ b/test/e2e/core/reticle.test.js
@@ -9,11 +9,12 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
describe("Crosshair Reticle Tests", () => {
test("Crosshair hidden onload, shows on focus", async () => {
- const beforeTabHidden = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
- await page.keyboard.press("Tab");
- const afterTab = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
- await expect(beforeTabHidden).toEqual("hidden");
- await expect(afterTab).toEqual("");
+ const beforeFocus = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
+ await expect(beforeFocus).toEqual("hidden");
+ await page.focus("mapml-viewer >> css= div.leaflet-container")
+ await page.keyboard.press("ArrowUp");
+ const afterFocus = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
+ await expect(afterFocus).toEqual("");
});
test("Crosshair remains on map move with arrow keys", async () => {
@@ -32,8 +33,7 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
test("Crosshair shows on esc but hidden on tab out", async () => {
await page.keyboard.press("Escape");
const afterEsc = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
- await page.click("body");
- await page.keyboard.press("Tab");
+ await page.focus("mapml-viewer >> css= div.leaflet-container")
await page.keyboard.press("ArrowUp");
await page.keyboard.press("Tab");
@@ -44,8 +44,7 @@ describe("Playwright Keyboard Navigation + Query Layer Tests" , () => {
});
test("Crosshair hidden when queryable layer is unselected, shows on reselect", async () => {
- await page.click("body");
- await page.keyboard.press("Tab");
+ await page.focus("mapml-viewer >> css= div.leaflet-container")
await page.keyboard.press("ArrowUp");
await page.evaluateHandle(() => document.querySelector("layer-").removeAttribute("checked"));
const afterUncheck = await page.$eval("div > div.mapml-crosshair", (div) => div.style.visibility);
diff --git a/test/e2e/layers/general/isVisible.js b/test/e2e/layers/general/isVisible.js
index 9aa07b98d..ff22c8211 100644
--- a/test/e2e/layers/general/isVisible.js
+++ b/test/e2e/layers/general/isVisible.js
@@ -6,7 +6,7 @@ exports.test = (path, zoomIn, zoomOut) => {
test("isVisible property false when zoomed out of bounds (zooming in)", async () => {
for (let i = 0; i < zoomIn; i++) {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in', {force: true});
await page.waitForTimeout(300);
}
await page.hover('div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > a');
@@ -18,7 +18,7 @@ exports.test = (path, zoomIn, zoomOut) => {
test("isVisible property false when zoomed out of bounds (zooming out)", async () => {
for (let i = 0; i < zoomOut + zoomIn; i++) {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out', {force: true});
await page.waitForTimeout(300);
}
const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1)",
diff --git a/test/e2e/layers/general/zoomLimit.js b/test/e2e/layers/general/zoomLimit.js
index 161ac11a3..fea554189 100644
--- a/test/e2e/layers/general/zoomLimit.js
+++ b/test/e2e/layers/general/zoomLimit.js
@@ -8,7 +8,7 @@ exports.test = (path, zoomIn, zoomOut) => {
test("Limit map zooming (zooming in)", async () => {
for (let i = 0; i < zoomIn; i++) {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in', {force: true});
await page.waitForTimeout(500);
}
const zoomButton = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in",
@@ -18,7 +18,7 @@ exports.test = (path, zoomIn, zoomOut) => {
});
test("Allow zooming before reaching limit (zooming in)", async () => {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out', {force: true});
await page.waitForTimeout(300);
const zoomButton = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in",
(controller) => controller.className);
@@ -28,7 +28,7 @@ exports.test = (path, zoomIn, zoomOut) => {
test("Limit map zooming (zooming out)", async () => {
for (let i = 0; i < zoomOut + zoomIn - 1; i++) {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out', {force: true});
await page.waitForTimeout(500);
}
const zoomButton = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out",
@@ -38,7 +38,7 @@ exports.test = (path, zoomIn, zoomOut) => {
});
test("Allow zooming before reaching limit (zooming out)", async () => {
- await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in');
+ await page.click('div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in', {force: true});
await page.waitForTimeout(300);
const zoomButton = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-out",
(controller) => controller.className);
diff --git a/test/e2e/layers/queryLink.test.js b/test/e2e/layers/queryLink.test.js
index d8eb24c0a..513e8dd4d 100644
--- a/test/e2e/layers/queryLink.test.js
+++ b/test/e2e/layers/queryLink.test.js
@@ -76,7 +76,7 @@ describe("Playwright Query Link Tests", () => {
});
test("Next feature added + popup content updated ", async () => {
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
@@ -91,7 +91,7 @@ describe("Playwright Query Link Tests", () => {
});
test("Previous feature added + popup content updated ", async () => {
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(2)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(2)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
@@ -107,7 +107,7 @@ describe("Playwright Query Link Tests", () => {
test("PCRS feature added + popup content updated ", async () => {
for (let i = 0; i < 2; i++)
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
@@ -122,7 +122,7 @@ describe("Playwright Query Link Tests", () => {
});
test("TCRS feature added + popup content updated ", async () => {
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
@@ -137,7 +137,7 @@ describe("Playwright Query Link Tests", () => {
});
test("Tilematrix feature added + popup content updated ", async () => {
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
@@ -151,7 +151,7 @@ describe("Playwright Query Link Tests", () => {
await expect(popup).toEqual("TILEMATRIX Test");
});
test("Synthesized point, valid location ", async () => {
- await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
+ await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)",{force: true});
const feature = await page.$eval(
"div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
(tile) => tile.getAttribute("d")
diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js
index d93df75b5..1eea91ebe 100644
--- a/test/e2e/mapml-viewer/viewerContextMenu.test.js
+++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js
@@ -25,47 +25,30 @@ describe("Playwright mapml-viewer Context Menu (and api) Tests", () => {
test("Context menu focus on keyboard shortcut", async () => {
await page.click("body > mapml-viewer");
await page.keyboard.press("Shift+F10");
- const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
- const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
- const resultHandle = await page.evaluateHandle(root => root.activeElement, nextHandle);
- const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
- let name = await nameHandle.jsonValue();
- await nameHandle.dispose();
- await expect(name).toEqual("Back (B)");
+ const activeButtonText = await page.evaluate(`document.activeElement.shadowRoot.activeElement.textContent`);
+ await expect(activeButtonText).toEqual("Back (B)");
});
test("Context menu tab goes to next item", async () => {
+ // depends on previous test
await page.keyboard.press("Tab");
- const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
- const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
- const resultHandle = await page.evaluateHandle(root => root.activeElement, nextHandle);
- const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
- let name = await nameHandle.jsonValue();
- await nameHandle.dispose();
- await expect(name).toEqual("Forward (F)");
+ const activeButtonText = await page.evaluate(`document.activeElement.shadowRoot.activeElement.textContent`);
+ await expect(activeButtonText).toEqual("Forward (F)");
});
test("Context menu shift + tab goes to previous item", async () => {
+ // depends on previous test
await page.keyboard.press("Shift+Tab");
- const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
- const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
- const resultHandle = await page.evaluateHandle(root => root.activeElement, nextHandle);
- const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
- let name = await nameHandle.jsonValue();
- await nameHandle.dispose();
- await expect(name).toEqual("Back (B)");
+ const activeButtonText = await page.evaluate(`document.activeElement.shadowRoot.activeElement.textContent`);
+ await expect(activeButtonText).toEqual("Back (B)");
});
test("Submenu opens on C with focus on first item", async () => {
+ // depends on previous test
await page.keyboard.press("c");
- const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
- const nextHandle = await page.evaluateHandle(doc => doc.shadowRoot, aHandle);
- const resultHandle = await page.evaluateHandle(root => root.activeElement, nextHandle);
- const nameHandle = await page.evaluateHandle(name => name.outerText, resultHandle);
- let name = await nameHandle.jsonValue();
- await nameHandle.dispose();
- await expect(name).toEqual("tile");
+ const activeButtonText = await page.evaluate(`document.activeElement.shadowRoot.activeElement.textContent`);
+ await expect(activeButtonText).toEqual("tile");
});
test("Context menu displaying on map", async () => {