To make test files readable

.vscode/launch.json

@@ -4,6 +4,8 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+
+
     {
       "name": "Launch localhost",
       "type": "chrome",

package.json

@@ -161,6 +161,7 @@
     "copy-files": "copyfiles -u 1 ./src/**/*.css ./dist && copyfiles -u 1 ./src/**/*.scss ./dist && copyfiles ./public ./dist",
     "analyze": "source-map-explorer build/static/js/main.*",
     "test": "wdio run tests/conf/parallel.conf.js",
+    "test-live-app": "CI_TEST_GIT_REF=production CI_TEST_GIT_SHA1=12345678 BROWSERSTACK_LOCAL=0 CI_DEPLOYMENT_TEST_URL=https://wheelmap.org npm run test",
     "version": "echo TODO: Add version syncing to bundle configurations for native apps + git commit -am 'Version bump' to package.json",
     "server": "server",
     "push-translations": "rm -rf src/.next/ && npx ttag update public/i18n/translations.pot ./src && tx push -s && echo \"Translators can now start translating new strings:\\n\\nhttps://www.transifex.com/sozialhelden/wheelmap-react-frontend/translate/#de/translationspot/335454735?q=translated%3Ano\"",

tests/conf/parallel.conf.js

@@ -36,7 +36,8 @@ checkEnvironmentVariables();
 
 // https://github.com/browserstack/webdriverio-browserstack
 exports.config = {
-  user: process.env.BROWSERSTACK_USERNAME,
+  user: process.env.BROWSERSTACK_USERNAME, 
+  bail: 1,
   key: process.env.BROWSERSTACK_ACCESS_KEY,
 
   services: [

tests/specs-todo/search-by-shop.js

@@ -0,0 +1,51 @@
+const IdPropertyName = 'element-6066-11e4-a52e-4f735466dfgh';
+const saveScreenshot = require('../lib/saveScreenshot');
+const getCurrentUrl = require('../lib/getCurrentUrl');
+const acceptLocationAlertOnMobilesIfPresent = require('../lib/acceptLocationAlertOnMobilesIfPresent');
+
+// See the WebDriver API documentation for a list of possible actions.
+// https://webdriver.io/docs/api.html
+// https://github.com/webdriverio/expect-webdriverio/blob/HEAD/docs/API.md
+
+// See the Mocha API for test structure: https://mochajs.org/
+describe('Searching a shop', function() {
+  it('delivers results', async function() {
+    await browser.url('/');
+
+    await acceptLocationAlertOnMobilesIfPresent();
+
+    const $button = await $('button=Okay, let’s go!');
+    await $button.click();
+
+    const { capabilities } = browser;
+    if (capabilities.platformName === 'iOS' || capabilities.platform === 'ANDROID') {
+      const $searchButtonOnMobile = await $('.search-button');
+      await $searchButtonOnMobile.waitForExist();
+      await $searchButtonOnMobile.click();
+    }
+
+
+    const $search = await $('[name="search"]');
+    await $search.click();
+    await (await $('[name="search"]')).addValue('Bötzowstr. 31');
+    $results = await $('.search-results');
+    await saveScreenshot('Search results are loading'); 
+
+    await browser.waitUntil(async () => {
+
+      return $('.search-results').isExisting();
+    });
+
+  // Wait for wheelchair accessibility to be loaded
+   await browser.waitUntil(
+    async () => await (await $results.$('header.is-on-wheelmap=Bötzowstr. 31')).isDisplayed()
+  );
+
+
+    const $result = await $results.$('header=Bötzowstr. 31');
+    await expect($results).toBeDisplayedInViewport();
+    await saveScreenshot('Search results are displayed');
+
+
+  });
+});

tests/specs/highlighted-marker.js

@@ -17,11 +17,11 @@ describe('Highlighted marker', function() {
     await $button.click();
 
     const $placeInfoPanel = await $('.toolbar[aria-label="Berlin Alexanderplatz"]');
-    const $placeName = await $placeInfoPanel.$('h1=Berlin Alexanderplatz');
+    const $placeName = await $placeInfoPanel.$('div=Berlin Alexanderplatz');
     await expect($placeName).toBeDisplayedInViewport();
     await saveScreenshot('After opening');
 
-    const $highlightedMarker = await $('a.highlighted-marker[aria-label="Berlin Alexanderplatz Fully wheelchair accessible"]');
+    const $highlightedMarker = await $('a.highlighted-marker[aria-label="Berlin Alexanderplatz, Fully wheelchair accessible"]');
     await expect($highlightedMarker).toBeDisplayedInViewport();
     await saveScreenshot('Marker visible');
   });

tests/specs/search-by-name.js

@@ -10,7 +10,10 @@ const acceptLocationAlertOnMobilesIfPresent = require('../lib/acceptLocationAler
 // See the Mocha API for test structure: https://mochajs.org/
 
 describe('Searching a place by name', function() {
+
   it('delivers results', async function() {
+    await browser.setTimeout({ 'implicit': 100000 });
+
     await browser.url('/');
 
     await acceptLocationAlertOnMobilesIfPresent();
@@ -27,14 +30,16 @@ describe('Searching a place by name', function() {
 
     const $search = await $('[name="search"]');
     await $search.click();
-    await browser.waitUntil(async () => {
-      const el = await browser.findElement('css selector', 'a[href="/search?category=food"]');
-      return el && el[IdPropertyName];
-    });
     await saveScreenshot('Category and accessibility filter is shown');
     await (await $('[name="search"]')).addValue('alexanderplatz');
 
+    await browser.waitUntil(async () => {
+      return $('.search-results').isExisting();
+    });
+
+    browser.findElement('css selector', '.search-results');
     const $results = await $('.search-results');
+
     await expect($results).toBeDisplayedInViewport();
     await saveScreenshot('Search results are loading');
 
@@ -48,13 +53,16 @@ describe('Searching a place by name', function() {
 
     await saveScreenshot('Search results show their accessibility');
 
+    await browser.waitUntil(async () => {
+        return $results.$('header=Berlin Alexanderplatz').isExisting();
+    });
     const $resultAfterSearch = await $results.$('header=Berlin Alexanderplatz');
+
     await $resultAfterSearch.waitForClickable();
     await $resultAfterSearch.click();
 
     await browser.waitUntil(async () => (await getCurrentUrl()).match(/\/node\//));
-    const results = await browser.findElement('css selector', '.search-results');
-    await expect(results[IdPropertyName]).toBeUndefined();
+
     const $placeInfoPanel = await $('.toolbar[aria-label~="Alexanderplatz"');
     const $placeName = await $placeInfoPanel.$('h1*=Alexanderplatz');
     await expect($placeName).toBeDisplayedInViewport();