Replace WebDriverIO with Cypress (#831)

This does the following: 1. Moves the WDIO code from javascript to typescript 2. Moves to use files that are `cy.ts` instead of `index.js` 3. Replace e2e to use cypress 4. Introduce back some skipped tests This is in continue to the conversation here: HarelM#3 Before: ``` "spec" Reporter: ------------------------------------------------------------------ [chrome 120.0.6099.71 linux #0-0] Running: chrome (v120.0.6099.71) on linux [chrome 120.0.6099.71 linux #0-0] Session ID: ee9a87bcfce007ac7721929c6e6234d0 [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] » /test/functional/index.js [chrome 120.0.6099.71 linux #0-0] maputnik [chrome 120.0.6099.71 linux #0-0] history [chrome 120.0.6099.71 linux #0-0] - undo/redo [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] layers [chrome 120.0.6099.71 linux #0-0] ops [chrome 120.0.6099.71 linux #0-0] ✓ delete [chrome 120.0.6099.71 linux #0-0] ✓ duplicate [chrome 120.0.6099.71 linux #0-0] ✓ hide [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] background [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] modify [chrome 120.0.6099.71 linux #0-0] layer [chrome 120.0.6099.71 linux #0-0] - expand/collapse [chrome 120.0.6099.71 linux #0-0] ✓ id [chrome 120.0.6099.71 linux #0-0] ✓ min-zoom [chrome 120.0.6099.71 linux #0-0] ✓ max-zoom [chrome 120.0.6099.71 linux #0-0] ✓ comments [chrome 120.0.6099.71 linux #0-0] - color [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] filter [chrome 120.0.6099.71 linux #0-0] - expand/collapse [chrome 120.0.6099.71 linux #0-0] - compound filter [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] paint [chrome 120.0.6099.71 linux #0-0] - expand/collapse [chrome 120.0.6099.71 linux #0-0] - color [chrome 120.0.6099.71 linux #0-0] - pattern [chrome 120.0.6099.71 linux #0-0] - opacity [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] json-editor [chrome 120.0.6099.71 linux #0-0] - expand/collapse [chrome 120.0.6099.71 linux #0-0] - modify [chrome 120.0.6099.71 linux #0-0] - parse error [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] fill [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] - change source [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] line [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] - groups [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] symbol [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] raster [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] circle [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] fill extrusion [chrome 120.0.6099.71 linux #0-0] ✓ add [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] groups [chrome 120.0.6099.71 linux #0-0] ✓ simple [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] map [chrome 120.0.6099.71 linux #0-0] zoom level [chrome 120.0.6099.71 linux #0-0] - via url [chrome 120.0.6099.71 linux #0-0] - via map controls [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] modals [chrome 120.0.6099.71 linux #0-0] open [chrome 120.0.6099.71 linux #0-0] ✓ close [chrome 120.0.6099.71 linux #0-0] - upload [chrome 120.0.6099.71 linux #0-0] ✓ load from url [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] shortcuts [chrome 120.0.6099.71 linux #0-0] ✓ open/close [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] export [chrome 120.0.6099.71 linux #0-0] ✓ close [chrome 120.0.6099.71 linux #0-0] - download [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] sources [chrome 120.0.6099.71 linux #0-0] - active sources [chrome 120.0.6099.71 linux #0-0] - public source [chrome 120.0.6099.71 linux #0-0] - add new source [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] inspect [chrome 120.0.6099.71 linux #0-0] ✓ toggle [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] style settings [chrome 120.0.6099.71 linux #0-0] ✓ name [chrome 120.0.6099.71 linux #0-0] ✓ owner [chrome 120.0.6099.71 linux #0-0] ✓ sprite url [chrome 120.0.6099.71 linux #0-0] ✓ glyphs url [chrome 120.0.6099.71 linux #0-0] ✓ maptiler access token [chrome 120.0.6099.71 linux #0-0] ✓ thunderforest access token [chrome 120.0.6099.71 linux #0-0] ✓ style renderer [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] sources [chrome 120.0.6099.71 linux #0-0] - toggle [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] screenshots [chrome 120.0.6099.71 linux #0-0] ✓ front_page [chrome 120.0.6099.71 linux #0-0] ✓ open [chrome 120.0.6099.71 linux #0-0] ✓ export [chrome 120.0.6099.71 linux #0-0] ✓ sources [chrome 120.0.6099.71 linux #0-0] ✓ style settings [chrome 120.0.6099.71 linux #0-0] ✓ inspect [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] accessibility [chrome 120.0.6099.71 linux #0-0] skip links [chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer list [chrome 120.0.6099.71 linux #0-0] ✓ skip link to layer editor [chrome 120.0.6099.71 linux #0-0] ✓ skip link to map view [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] keyboard [chrome 120.0.6099.71 linux #0-0] shortcuts [chrome 120.0.6099.71 linux #0-0] ✓ ESC should unfocus [chrome 120.0.6099.71 linux #0-0] ✓ '?' should show shortcuts modal [chrome 120.0.6099.71 linux #0-0] ✓ 'o' should show open modal [chrome 120.0.6099.71 linux #0-0] ✓ 'e' should show export modal [chrome 120.0.6099.71 linux #0-0] ✓ 'd' should show sources modal [chrome 120.0.6099.71 linux #0-0] ✓ 's' should show settings modal [chrome 120.0.6099.71 linux #0-0] - 'i' should change map to inspect mode [chrome 120.0.6099.71 linux #0-0] ✓ 'm' should focus map [chrome 120.0.6099.71 linux #0-0] ✓ '!' should show debug modal [chrome 120.0.6099.71 linux #0-0] [chrome 120.0.6099.71 linux #0-0] 44 passing (58.8s) [chrome 120.0.6099.71 linux #0-0] 23 skipped ``` After: ``` accessibility skip links - skip link to layer list - skip link to layer editor - skip link to map view history ✓ undo/redo (4894ms) keyboard shortcuts ✓ ESC should unfocus (1912ms) ✓ '?' should show shortcuts modal (458ms) ✓ 'o' should show open modal (710ms) ✓ 'e' should show export modal (692ms) ✓ 'd' should show sources modal (588ms) ✓ 's' should show settings modal (894ms) ✓ 'i' should change map to inspect mode (804ms) ✓ 'm' should focus map (837ms) ✓ '!' should show debug modal (607ms) layers ops ✓ delete (4313ms) ✓ duplicate (1780ms) ✓ hide (1862ms) background ✓ add (1675ms) modify layer - expand/collapse ✓ id (3735ms) ✓ min-zoom (2209ms) ✓ max-zoom (2127ms) ✓ comments (2515ms) ✓ color (2022ms) filter - expand/collapse - compound filter paint - expand/collapse - color - pattern - opacity json-editor - expand/collapse - modify - parse error fill ✓ add (1831ms) - change source line ✓ add (1844ms) ✓ groups (687ms) symbol ✓ add (2035ms) raster ✓ add (1814ms) circle ✓ add (1867ms) fill extrusion ✓ add (1963ms) groups ✓ simple (2653ms) map zoom level ✓ via url (2279ms) ✓ via map controls (733ms) modals open ✓ close (2519ms) - upload ✓ load from url (1557ms) shortcuts ✓ open/close (1136ms) export ✓ close (755ms) - download sources - active sources - public source - add new source inspect ✓ toggle (1020ms) style settings ✓ name (1085ms) ✓ owner (1060ms) ✓ sprite url (1214ms) ✓ glyphs url (1553ms) ✓ maptiler access token (1111ms) ✓ thunderforest access token (1102ms) ✓ style renderer (922ms) sources - toggle Spec Tests Passing Failing Pending Skipped ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ ✔ accessibility.cy.ts 52ms 3 - - 3 - │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ ✔ history.cy.ts 00:06 1 1 - - - │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ ✔ keyboard.cy.ts 00:10 9 9 - - - │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ ✔ layers.cy.ts 00:39 28 17 - 11 - │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ ✔ map.cy.ts 00:04 2 2 - - - │ ├────────────────────────────────────────────────────────────────────────────────────────────────┤ │ ✔ modals.cy.ts 00:16 18 12 - 6 - │ └────────────────────────────────────────────────────────────────────────────────────────────────┘ ✔ All specs passed! 01:18 61 41 - 20 - ``` --------- Co-authored-by: Yuri Astrakhan <[email protected]>
maplibre · Dec 17, 2023 · 1df2e36 · 1df2e36
1 parent 0c46aff
commit 1df2e36
Show file tree

Hide file tree

Showing 40 changed files with 3,310 additions and 8,456 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -141,52 +141,21 @@ jobs:
       with:
         name: maputnik-windows
         path: ./src/github.com/maputnik/desktop/bin/windows/
-
-  # build and test the editor
-  test_selenium_standalone:
-    name: "test/standalone-${{ matrix.browser }} (${{ matrix.os }})"
-    runs-on: ${{ matrix.os }}
-
-    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
-
+
+  cypress-run:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest]
-        node-version: [18]
         browser: [chrome, firefox]
 
-    container:
-      image: node:${{ matrix.node-version }}
-      options: --network-alias testhost
-
-    services:
-      selenium:
-        image: selenium/standalone-${{ matrix.browser }}
-        ports:
-        - 4444:4444
-        options: --shm-size=2gb
-
+    runs-on: ubuntu-22.04
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
-    - run: npm ci
-    - run: BROWSER=${{ matrix.browser }} TEST_NETWORK=testhost DOCKER_HOST=selenium npm run test
-    - if: ${{ matrix.browser == 'chrome' }}
-      run: ./node_modules/.bin/istanbul report --include build/coverage/coverage.json --dir build/coverage html lcov
-    - if: ${{ matrix.browser == 'chrome' }}
-      name: artifacts/coverage
-      uses: actions/upload-artifact@v1
-      with:
-        name: coverage
-        path: build/coverage
-    - name: artifacts/screenshots
-      uses: actions/upload-artifact@v1
-      with:
-        name: screenshots-${{ matrix.browser }}
-        path: build/screenshots
+      - name: Checkout
+        uses: actions/checkout@v4
+      - run: npm ci
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run build
+          start: npm run start
+          browser: ${{ matrix.browser }}
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,4 @@ public
 /errorShots
 /old
 /build
+/cypress/screenshots
diff --git a/README.md b/README.md
@@ -76,9 +76,9 @@ npm run lint-styles
 
 
 ## Tests
-For testing we use [webdriverio](https://webdriver.io) and [selenium-standalone](https://github.com/webdriverio/selenium-standalone).
+For E2E testing we use [Cypress](https://www.cypress.io/)
 
-[selenium-standalone](https://github.com/webdriverio/selenium-standalone) starts a server that will launch browsers on your local machine. You need to have Java installed on your machine as well as *chrome* or *firefox*.
+ [Cypress](https://www.cypress.io/) doesn't starts a server so you'll need to start one manually by running `npm run start`.
 
 Now open a terminal and run the following using *chrome*:
 
@@ -87,10 +87,16 @@ npm run test
 ```
 or *firefox*:
 ```
-BROWSER=firefox npm run test
+npm run test -- --browser firefox
 ```
 
-After some time you should see a browser launch which will be automated by the test runner.
+See the following docs for more info: (Launching Browsers)[https://docs.cypress.io/guides/guides/launching-browsers]
+
+You can also see the tests as they run or select which suites to run by executing:
+
+```
+npm run cy:open
+```
 
 
 ## Related Projects
@@ -155,6 +161,5 @@ Sina Martinelli, Nicholas Doiron, Neil Cawse, Urs42, Benedikt Groß, Manuel Roth
 
 Maputnik is [licensed under MIT](LICENSE) and is Copyright (c) Lukas Martinelli and contributors.
 
-**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is an independent style editor for the
-open source technology in the Mapbox GL ecosystem.
+**Disclaimer** This is an independent style editor.
 As contributor please take extra care of not violating any Mapbox trademarks. Do not get inspired by Mapbox Studio and make your own decisions for a good style editor.
diff --git a/config/wdio.conf.js b/config/wdio.conf.js
diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js
@@ -6,16 +6,14 @@ var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var CopyWebpackPlugin = require('copy-webpack-plugin');
-var artifacts = require("../test/artifacts");
 
-var OUTPATH = artifacts.pathSync("/build");
 
 module.exports = {
   entry: {
     app: './src/index.jsx',
   },
   output: {
-    path: OUTPATH,
+    path: path.join(__dirname, '..', 'build', 'build'),
     filename: '[name].[contenthash].js',
     chunkFilename: '[contenthash].js'
   },

diff --git a/config/webpack.profiling.config.js b/config/webpack.profiling.config.js
@@ -1,13 +1,11 @@
 const webpackProdConfig = require('./webpack.production.config');
-const artifacts = require("../test/artifacts");
-
-const OUTPATH = artifacts.pathSync("/profiling");
+var path = require('path');
 
 module.exports = {
   ...webpackProdConfig,
   output: {
     ...webpackProdConfig.output,
-    path: OUTPATH,
+    path: path.join(__dirname, '..', 'build', 'profiling'),
   },
   resolve: {
     ...webpackProdConfig.resolve,

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/e2e/accessibility.cy.ts b/cypress/e2e/accessibility.cy.ts
@@ -0,0 +1,41 @@
+import driver from "./driver";
+
+describe("accessibility", () => {
+    // skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
+  describe.skip("skip links", () => {
+    beforeEach(() => {
+        driver.beforeEach();
+        driver.setStyle("layer");
+    });
+
+    it("skip link to layer list", () => {
+      const selector = driver.getDataAttribute("root:skip:layer-list");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+
+      driver.isFocused("#skip-target-layer-list");
+    });
+
+    it("skip link to layer editor", () => {
+      const selector = driver.getDataAttribute("root:skip:layer-editor");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+
+      driver.isFocused("#skip-target-layer-editor");
+    });
+
+    it("skip link to map view", () => {
+      const selector = driver.getDataAttribute("root:skip:map-view");
+      driver.isExists(selector);
+      driver.typeKeys('{tab}{tab}{tab}');
+      driver.isFocused(selector);
+      driver.click(selector);
+
+      driver.isFocused(".maplibregl-canvas");
+    });
+  });  
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,3 +33,4 @@ public @@
     /errorShots
     /old
     /build
+    /cypress/screenshots