test(playwright): refactored files, add mobile test, all tests passing

Author: raferdev

docker-compose.test.yaml

@@ -4,11 +4,11 @@ services:
   nginx:
     container_name: server_nginx
     restart: 'no'
-    build: ./nginx/tests
+    build:
+      context: .
+      dockerfile: ./nginx/tests/Dockerfile
     ports:
       - 3000:80
-    volumes:
-      - /out:/www/data/out
     networks:
       - running-tests
 

nginx/tests/Dockerfile

@@ -7,7 +7,8 @@ RUN mkdir /var/cache/nginx -p
 RUN rm /etc/nginx/mime.types
 RUN rm /etc/nginx/conf.d/default.conf
 
-COPY ./nginx.conf /etc/nginx/
-COPY ./mime.types /etc/nginx/conf/
+COPY ./nginx/tests/nginx.conf /etc/nginx/
+COPY ./nginx/tests/mime.types /etc/nginx/conf/
+COPY ./out /www/data/out
 
 EXPOSE 80

playwright.config.ts

@@ -18,6 +18,10 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Galaxy S9+'] },
+    },
   ],
 
   webServer: {

tests/accessibility.spec.ts

@@ -1,14 +1,27 @@
 import AxeBuilder from '@axe-core/playwright'
 import { expect, test } from '@playwright/test'
 
+const HOME = '/'
+
 test.describe('Accessibility', () => {
+  test.beforeEach(async ({ page }) => {
+    try {
+      await page.waitForLoadState()
+    } catch (error) {
+      console.error(error)
+    }
+  })
   test('Should not have any automatically detectable accessibility issues', async ({
     page,
   }) => {
-    await page.goto('/')
+    try {
+      await page.goto(HOME)
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+      const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
 
-    expect(accessibilityScanResults.violations).toEqual([])
+      expect(accessibilityScanResults.violations).toEqual([])
+    } catch (error) {
+      console.error(error)
+    }
   })
 })

tests/components.spec.ts

@@ -3,15 +3,28 @@ import { expect, test } from '@playwright/test'
 const HOME = '/'
 
 test.describe('Component - Dev tools', () => {
-  const DEV_TOOLS = 'tailwind-indicator'
+  test.beforeEach(async ({ page }) => {
+    try {
+      await page.waitForLoadState()
+    } catch (error) {
+      console.error(error)
+    }
+  })
+  try {
+    const DEV_TOOLS = 'tailwind-indicator'
 
-  test('Expected - Tailwind indicator to not be rendered', async ({ page }) => {
-    await page.goto(HOME)
+    test('Expected - Tailwind indicator to not be rendered', async ({
+      page,
+    }) => {
+      await page.goto(HOME)
 
-    const twIndicator = await page.getByTestId(DEV_TOOLS).count()
+      const twIndicator = await page.getByTestId(DEV_TOOLS).count()
 
-    expect(twIndicator).toBe(0)
-  })
+      expect(twIndicator).toBe(0)
+    })
+  } catch (error) {
+    console.error(error)
+  }
 })
 
 test.describe('Component - Marquee', () => {
@@ -30,50 +43,73 @@ test.describe('Component - Marquee', () => {
     'AWS',
   ]
 
+  test.beforeEach(async ({ page }) => {
+    try {
+      await page.waitForLoadState()
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
   test('Expected - Marquee to be visible', async ({ page }) => {
-    await page.goto(HOME)
+    try {
+      await page.goto(HOME)
 
-    const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
+      const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
 
-    await expect(PAGE_LOCATOR).toBeVisible()
+      await expect(PAGE_LOCATOR).toBeVisible()
+    } catch (error) {
+      console.log(error)
+    }
   })
   test('Expected - Correct height and width, 70px 100vw', async ({ page }) => {
-    await page.goto(HOME)
+    try {
+      await page.goto(HOME)
 
-    const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
+      const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
 
-    const marquee = await PAGE_LOCATOR.boundingBox()
+      const marquee = await PAGE_LOCATOR.boundingBox()
 
-    const viewPort = page.viewportSize()
+      const viewPort = page.viewportSize()
 
-    if (viewPort === null) throw new Error('Viewport is null')
+      if (viewPort === null) throw new Error('Viewport is null')
 
-    const { width } = viewPort
+      const { width } = viewPort
 
-    expect(marquee?.width).toBe(width)
-    expect(marquee?.height).toBe(MARQUEE_HEIGHT)
+      expect(marquee?.width).toBe(width)
+      expect(marquee?.height).toBe(MARQUEE_HEIGHT)
+    } catch (error) {
+      console.error(error)
+    }
   })
 
   test('Expected - Total images number', async ({ page }) => {
-    await page.goto(HOME)
+    try {
+      await page.goto(HOME)
 
-    const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
-    const marqueeImages = PAGE_LOCATOR.locator('img')
+      const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
+      const marqueeImages = PAGE_LOCATOR.locator('img')
 
-    expect(await marqueeImages.count()).toBe(TOTAL_IMAGES)
+      expect(await marqueeImages.count()).toBe(TOTAL_IMAGES)
+    } catch (error) {
+      console.error(error)
+    }
   })
 
   test('Expected - All images to be visible', async ({ page }) => {
-    await page.goto(HOME)
-
-    const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
-
-    const marqueeImages = await PAGE_LOCATOR.locator('img').all()
-
-    for (const image of marqueeImages) {
-      const alt = await image.getAttribute('alt')
-      expect(image).toBeVisible()
-      expect(MARQUEE_IMAGES).toContain(alt)
+    try {
+      await page.goto(HOME)
+      const PAGE_LOCATOR = page.locator('div').filter({ hasText: MARQUEE_SPAN })
+
+      const marqueeImages = await PAGE_LOCATOR.locator('img').all()
+
+      for (const image of marqueeImages) {
+        const alt = await image.getAttribute('alt')
+        await expect(image).toBeVisible()
+        expect(MARQUEE_IMAGES).toContain(alt)
+      }
+    } catch (error) {
+      console.error(error)
     }
   })
 })

tests/screenshot.spec.ts

@@ -1,7 +1,13 @@
 import { expect, test } from '@playwright/test'
 
+const HOME = '/'
+
 test('Full page', async ({ page }) => {
-  await page.goto('/')
+  try {
+    await page.goto(HOME)
 
-  await expect(page).toHaveScreenshot({ fullPage: true })
+    await expect(page).toHaveScreenshot({ fullPage: true })
+  } catch (error) {
+    console.error(error)
+  }
 })