Run browser tests in Chrome and Firefox (#830)

wbstack · Aug 1, 2024 · 280af11 · 280af11
1 parent 854e744
commit 280af11
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -22,12 +22,20 @@ services:
     profiles: [ browser-tests ]
     image: selenium/standalone-firefox:4.21.0
     shm_size: 2gb
-    ports:
-     - 4444:4444
-     - 7900:7900
     healthcheck:
       test: curl --fail http://selenium-firefox:4444
       interval: 5s
       start_period: 0s
     extra_hosts:
       - "host.docker.internal:host-gateway"
+
+  selenium-chrome:
+    profiles: [ browser-tests ]
+    image: selenium/standalone-chrome:4.23.0
+    shm_size: 2gb
+    healthcheck:
+      test: curl --fail http://selenium-chrome:4444
+      interval: 5s
+      start_period: 0s
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
diff --git a/tests/e2e/pageobjects/discovery.page.js b/tests/e2e/pageobjects/discovery.page.js
@@ -3,7 +3,6 @@ class Discovery {
   get sortDropdown () { return $('.options .v-select') }
   get sortValue () { return $('.options .v-select__selection') }
   get excludeEmptyCheckbox () { return $('.options .v-input--checkbox input') }
-  get cards () { return $('.grid.cards') }
   get firstCard () { return $('.card:first-child') }
   get lastCard () { return $('.card:last-child') }
   get footer () { return $('.footer') }
@@ -25,14 +24,16 @@ class Discovery {
     return await this.getCardDetails(await this.lastCard)
   }
 
-  getCardByWikiName (name) {
-    return $('//div[contains(text(), "' + name + '")]')
-  }
-
   getCardByPageCount (count) {
     return $('//div[contains(text(), "No. of pages: ' + count + '")]')
   }
 
+  async waitForCards () {
+    const sortDropdown = await this.sortDropdown
+    // Inputs on the discovery page are disabled until the results are loaded
+    await sortDropdown.waitForClickable({ timeout: 5000 })
+  }
+
   async setSortValue (value) {
     const sortDropdown = await this.sortDropdown
     await sortDropdown.waitForClickable({ timeout: 5000 })
@@ -43,6 +44,7 @@ class Discovery {
     )
     await dropdownOption.waitForDisplayed({ timeout: 5000 })
     await dropdownOption.click()
+    await this.waitForCards()
   }
 
   async open (path = '/discovery') {

diff --git a/tests/e2e/specs/discovery.spec.js b/tests/e2e/specs/discovery.spec.js
@@ -73,10 +73,9 @@ describe('Discovery page', () => {
 
   it('should filter out empty instances by default', async () => {
     await Discovery.setSortValue('Alphabetically ↑')
+    await Discovery.waitForCards()
 
     const excludeEmptyCheckbox = await Discovery.excludeEmptyCheckbox
-    const cards = await Discovery.cards
-    await cards.waitForDisplayed({ timeout: 5000 })
     const cardWithLeastPages = await Discovery.getCardByPageCount(0)
 
     expect(await excludeEmptyCheckbox.isSelected()).toBe(true)
@@ -91,8 +90,7 @@ describe('Discovery page', () => {
     const excludeEmptyCheckboxWrapper = await excludeEmptyCheckbox.parentElement()
     await excludeEmptyCheckboxWrapper.click()
 
-    const cards = await Discovery.cards
-    await cards.waitForDisplayed({ timeout: 5000 })
+    await Discovery.waitForCards()
     const cardWithLeastPages = await Discovery.getCardByPageCount(0)
 
     expect(await excludeEmptyCheckbox.isSelected()).toBe(false)

diff --git a/wdio.local.conf.js b/wdio.local.conf.js
@@ -11,18 +11,19 @@ exports.config = {
   logLevel: 'debug',
   outputDir: '',
   maxInstances: 1,
-  hostname: 'selenium-firefox',
   port: 4444,
   path: '/wd/hub',
   capabilities: [
     {
       browserName: 'firefox',
-      'moz:firefoxOptions': {
-        args: ['-headless']
-      },
-      'alwaysMatch': {
+      hostname: 'selenium-firefox',
+      alwaysMatch: {
         'moz:debuggerAddress': true
       }
+    },
+    {
+      browserName: 'chrome',
+      hostname: 'selenium-chrome'
     }
   ]
 }