refactor remaining steps

tests/e2e/pageObjects/Viewer.ts

@@ -3,14 +3,14 @@ import { expect } from '@playwright/test'
 export class Viewer {
   elements: Readonly<Record<string, string>> = {
     appbarResourceNameSelector: '#app-top-bar-resource [data-test-resource-name="%s"]',
-    appTopBar: '.oc-app-top-bar .oc-resource', // '.oc-app-top-bar',
+    appTopBar: '.oc-app-top-bar .oc-resource',
     appTopBarResourceBasename: '.oc-resource-basename',
     appTopBarResourceExtension: '.oc-resource-extension',
     modelViewport: '#preview .model-viewport',
     modelViewportWrapper: '#preview #scene-wrapper',
     modelViewportWrapperFullscreen: '#scene-wrapper:fullscreen',
     modelViewportDescription: '#preview h1.oc-invisible-sr', // 'oc-hidden-announcer',
-    modelViewportCanvas: '#preview .model-viewport', // '#preview .model-viewport canvas'
+    modelViewportCanvas: '#preview .model-viewport canvas',
     controlButtonPrev: '.preview-controls-previous',
     controlButtonNext: '.preview-controls-next',
     controlButtonFullscreen: '.preview-controls-fullscreen',
@@ -39,7 +39,7 @@ export class Viewer {
     const viewportWidth = await element.evaluate((el) => {
       return window.getComputedStyle(el).getPropertyValue('width')
     })
-    // slice removes px at the end of value
+    // slice removes 'px' at the end of value
     return [viewportHeight.slice(0, -2), viewportWidth.slice(0, -2)]
   }
 
@@ -49,15 +49,6 @@ export class Viewer {
     return [windowInnerHeight.toString(), windowInnerWidth.toString()]
   }
 
-  async checkTopbarVisibility(): Promise<void> {
-    await expect(global.page.locator(this.elements.appTopBar)).toBeVisible()
-  }
-
-  async checkStandardDisplayMode(): Promise<void> {
-    // fullscreen pseudo class is hidden (doesn't exist)
-    await expect(global.page.locator(this.elements.modelViewportWrapperFullscreen)).toBeHidden()
-  }
-
   async toggleFullscreenMode(): Promise<void> {
     await global.page.locator(this.elements.controlButtonFullscreen).click()
   }
@@ -105,13 +96,12 @@ export class Viewer {
         */
   }
 
-  // helper function
+  // helper function (so far not used)
   async getComputedStyleForSelector(selector: string, cssAttribute: string): Promise<string> {
     const element = await global.page.waitForSelector(selector)
     const value = await element.evaluate((el) => {
       return window.getComputedStyle(el).getPropertyValue(cssAttribute)
     })
-    return value
-    //returns Promise object
+    return value // return value is Promise object
   }
 }

tests/e2e/steps/ViewerContext.ts

@@ -1,6 +1,7 @@
 import { Given, When, Then, DataTable } from '@cucumber/cucumber'
 import { expect } from '@playwright/test'
 import config from '../config'
+import util from 'util'
 
 import { Ocis } from '../pageObjects/Ocis'
 import { Viewer } from '../pageObjects/Viewer'
@@ -36,6 +37,9 @@ When(
 Then(
   'the 3D model {string} should be displayed in the viewport',
   async function (filename: string): Promise<void> {
+    // check if viewport and canvas are visible
+    await expect(global.page.locator(viewer.elements.modelViewport)).toBeVisible()
+    await expect(global.page.locator(viewer.elements.modelViewportCanvas)).toBeVisible()
     // add some delay to allow model to be loaded
     await delay(1000)
     // check if the filename is displayed in hidden h1 title element of the viewport
@@ -47,6 +51,9 @@ Then(
 Then(
   'the file name {string} should be shown in the topbar',
   async function (filename: string): Promise<void> {
+    // check if topbar is visible
+    await expect(global.page.locator(viewer.elements.appTopBar)).toBeVisible()
+    // check if correct file name is displayed
     const topbarFilename = await viewer.getTopbarResourceName()
     expect(topbarFilename).toContain(filename)
   }
@@ -62,15 +69,19 @@ Then('the 3D model should be displayed in fullscreen mode', async function (): P
   // in fullscreen mode, model viewport wrapper should have same size as browser window
   expect(viewportWrapperSize[0]).toBe(windowInnerSize[0])
   expect(viewportWrapperSize[1]).toBe(windowInnerSize[1])
+  // additionally test if fullscreen pseudo class exists
+  await expect(global.page.locator(viewer.elements.modelViewportWrapperFullscreen)).toBeVisible()
 })
 
 When('the user exits fullscreen mode', async function (): Promise<void> {
   await viewer.toggleFullscreenMode()
 })
 
 Then('the 3D model should be display in standard mode', async function (): Promise<void> {
-  await viewer.checkStandardDisplayMode()
-  await viewer.checkTopbarVisibility()
+  // check if fullscreen pseudo class is hidden (doesn't exist)
+  await expect(global.page.locator(viewer.elements.modelViewportWrapperFullscreen)).toBeHidden()
+  // check if top bar is visible
+  await expect(global.page.locator(viewer.elements.appTopBar)).toBeVisible()
 })
 
 When('the user rotates the model', function () {