Merge pull request #478 from ruxailab/playwright-testing

Playwright testing

.github/workflows/ishikawa-tools.yml

@@ -1,6 +1,6 @@
 name: Generate Reports
 
-on: 
+on:
   schedule:
     - cron: '0 0 * * *'
   issues:

.github/workflows/playwright.yml

@@ -0,0 +1,55 @@
+name: Playwright Tests
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Cache Docker layers
+        uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Build and start services
+        run: docker-compose up -d --build
+
+      - name: Wait for container to become available
+        run: |
+          npx wait-on http://localhost:8080
+          sleep 30  # Aumenta el tiempo de espera adicional para asegurarte de que el servidor está listo
+
+      - name: Check Docker logs
+        run: docker-compose logs
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Stop services
+        run: docker-compose down

.gitignore

@@ -29,3 +29,10 @@ firebase-debug.log
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Ignore the playwright test screenshots and video
+/playwright/output

dockerfile → Dockerfile

@@ -9,7 +9,7 @@ RUN npm install
 COPY . .
 
 # Run build as per the script defined in package.json
-RUN npm run build
+RUN npm run build-dev
 
 # Production stage using a minimal Node.js image
 FROM node:alpine AS production-stage

Dockerfile-playwright

@@ -0,0 +1,38 @@
+# Etapa 1: Construcción
+FROM node:lts AS build-stage
+
+WORKDIR /app
+
+# Copiar y instalar dependencias
+COPY package*.json ./
+RUN npm install
+
+# Copiar el resto de la aplicación y construir
+COPY . .
+RUN npm run build-dev
+
+# Etapa 2: Producción y Pruebas
+FROM node:18
+
+WORKDIR /app
+
+# Instalar 'serve' y 'wait-on' para servir la aplicación y esperar a que esté lista
+RUN npm install -g serve wait-on
+
+# Copiar la aplicación construida desde la etapa de construcción
+COPY --from=build-stage /app/dist /app
+
+# Copiar y instalar dependencias necesarias para Playwright
+COPY package*.json ./
+RUN npx playwright install --with-deps
+RUN npm install @playwright/test -D
+
+# Copiar la configuración de Playwright y el resto de la aplicación
+COPY playwright.config.js .
+COPY . .
+
+# Exponer el puerto en el que se servirá la aplicación
+EXPOSE 5000
+
+# Ejecutar la aplicación y esperar a que esté disponible antes de ejecutar las pruebas
+CMD ["sh", "-c", "serve -s . -l 5000 & wait-on http://localhost:5000 && npx playwright test"]

docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+
+services:
+  uxremotelab:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:5000"
+    depends_on:
+      - firebase-emulator
+
+  firebase-emulator:
+    build:
+      context: ./firebase-emulator
+    ports:
+      - "9099:9099"
+      - "5001:5001"
+      - "8081:8081"
+      - "5002:5002"
+      - "9199:9199"
+      - "4000:4000"
+      - "4400:4400"
+      - "4500:4500"
+      - "9150:9150"
+      - "5007:5007"
+    volumes:
+      - ./firebase-emulator:/app
+    environment:
+      - FIREBASE_PROJECT_ID=retlab-dev
+      # Agrega cualquier otra variable de entorno necesaria para el emulador de Firebase

e2e/ruxailabtest.spec.js

@@ -0,0 +1,182 @@
+const { test, expect } = require('@playwright/test')
+const { log } = require('console')
+
+const logIn = async (page) => {
+  await page.goto('/signin')
+
+  await page.getByLabel('E-mail').fill('[email protected]')
+  await page.getByLabel('Password', { exact: true }).fill('password123')
+
+  await page
+    .getByRole('main')
+    .getByRole('button', { name: 'Sign-In' })
+    .click()
+}
+
+const createTest = async (page, type) => {
+  await page.click(
+    'button.v-btn.v-btn--bottom.v-btn--is-elevated.v-btn--fab.v-btn--fixed.v-btn--has-bg.v-btn--right.v-btn--round',
+  ) // Click new test button
+
+  await page.click('.card-title:has-text("Create a blank test")')
+
+  type === 'heuristic' && (await page.click('.card.col-sm-10.col-md-5.col-10')) // Press heuristic test card
+  type === 'usability' && (await page.click('.card.col-sm-10.col-md-5.col-12')) // Press usability test card
+
+  await page
+    .getByRole('textbox', { name: 'Test Name' })
+    .fill('Test heuristic playwright')
+  await page
+    .getByRole('textbox', { name: 'Test Description' })
+    .fill('Some descripton')
+
+  await page.click(
+    '.ml-auto.mr-2.circleOrange.v-btn.v-btn--fab.v-btn--has-bg.v-btn--round.theme--dark.v-size--default.orange',
+  ) // Click create test button
+
+  type === 'usability' && (await page.click('.card.col-sm-10.col-md-4.col-10')) // Click self test card
+
+  await page.click(
+    '.console-button.mx-1.hidden-sm-and-down.v-btn.v-btn--text.theme--dark.v-size--default',
+  ) // Click go back to console button
+}
+
+test('has link page', async ({ page }) => {
+  await page.goto('http://localhost:8080/signin')
+
+  // Esperar un elemento específico
+  await page.waitForSelector('#app', { timeout: 20000 })
+
+  // Tomar una captura de pantalla para verificar el estado de la página
+  await page.screenshot({ path: 'screenshot.png' })
+
+  // Ahora verificar el título de la página
+  await expect(page).toHaveTitle(/RUXAILAB/, { timeout: 20000 })
+})
+
+// test('sign and create heurisic test', async ({ page }) => {
+//   await logIn(page)
+
+//   await createTest(page, 'heuristic')
+// })
+
+// test('sign and create usability test', async ({ page }) => {
+//   await logIn(page)
+
+//   await createTest(page, 'usability')
+// })
+
+// test('sign and create template', async ({ page }) => {
+//   /*login*/
+//   await logIn(page)
+
+//   await page.click(
+//     'button.v-btn.v-btn--bottom.v-btn--is-elevated.v-btn--fab.v-btn--fixed.v-btn--has-bg.v-btn--right.v-btn--round',
+//   ) // Click create new test button
+//   await page.click('.card-title:has-text("Create from template")')
+
+//   //create MARCTEST
+//   await page.click('.v-list-item.v-list-item--link.theme--light') // Select template
+//   await page.getByRole('button', { name: 'NEXT' }).click()
+//   await page
+//     .getByRole('textbox', { name: 'Title' })
+//     .fill('Test template playwrigth')
+//   await page
+//     .getByRole('textbox', { name: 'Description' })
+//     .fill('Some description for template')
+//   await page.getByRole('button', { name: 'CREATE' }).click()
+
+//   await page.click(
+//     '.console-button.mx-1.hidden-sm-and-down.v-btn.v-btn--text.theme--dark.v-size--default',
+//   ) // Click go back to console button
+// })
+
+// test('failure test heuristic', async ({ page }) => {
+//   await logIn(page)
+
+//   await page.click(
+//     'button.v-btn.v-btn--bottom.v-btn--is-elevated.v-btn--fab.v-btn--fixed.v-btn--has-bg.v-btn--right.v-btn--round',
+//   )
+//   await page.click('.card-title:has-text("Create a blank test")')
+//   await page.click('.card.col-sm-10.col-md-5.col-12')
+//   await page
+//     .getByRole('textbox', { name: 'Test Description' })
+//     .fill('Some descripton')
+//   await page.click(
+//     '.ml-auto.mr-2.circleOrange.v-btn.v-btn--fab.v-btn--has-bg.v-btn--round.theme--dark.v-size--default.orange',
+//   )
+
+//   const errorMessage = page.locator('div[role="alert"]')
+//   await expect(errorMessage).toBeVisible()
+//   await expect(errorMessage).toHaveText('Enter a Title')
+// })
+
+// test('Detalte test', async ({ page }) => {
+//   await logIn(page)
+
+//   await page.click(
+//     'button.v-btn.v-btn--bottom.v-btn--is-elevated.v-btn--fab.v-btn--fixed.v-btn--has-bg.v-btn--right.v-btn--round',
+//   )
+
+//   await page.click('.card-title:has-text("Create a blank test")')
+//   await page.click('.card.col-sm-10.col-md-5.col-12')
+
+//   await page
+//     .getByRole('textbox', { name: 'Test Name' })
+//     .fill('Test heuristic playwright for delate')
+//   await page
+//     .getByRole('textbox', { name: 'Test Description' })
+//     .fill('Some descripton')
+
+//   await page.click(
+//     '.ml-auto.mr-2.circleOrange.v-btn.v-btn--fab.v-btn--has-bg.v-btn--round.theme--dark.v-size--default.orange',
+//   )
+//   await page.click('.card.col-sm-10.col-md-4.col-10')
+//   await page.click(
+//     '.console-button.mx-1.hidden-sm-and-down.v-btn.v-btn--text.theme--dark.v-size--default',
+//   )
+
+//   await page.goto('/testslist')
+
+//   await page.click('text=Test heuristic playwright for delate')
+//   await page.click(
+//     '.v-btn.v-btn--icon.v-btn--round.theme--light.v-size--default',
+//   )
+//   await page.click(
+//     '.white--text.mb-4.v-btn.v-btn--is-elevated.v-btn--has-bg.theme--light.v-size--default',
+//   )
+//   await page.click(
+//     '.red.white--text.ml-1.v-btn.v-btn--text.theme--light.v-size--default',
+//   )
+// })
+
+// test('failure test template', async ({ page }) => {
+//   logIn(page)
+
+//   await page.click(
+//     'button.v-btn.v-btn--bottom.v-btn--is-elevated.v-btn--fab.v-btn--fixed.v-btn--has-bg.v-btn--right.v-btn--round',
+//   )
+//   await page.click('.card-title:has-text("Create from template")')
+
+//   await page.click('.v-list-item.v-list-item--link.theme--light')
+//   await page.getByRole('button', { name: 'NEXT' }).click()
+//   await page.getByRole('textbox', { name: 'Title' }).fill('')
+//   await page
+//     .getByRole('textbox', { name: 'Description' })
+//     .fill('Some description for template')
+//   await page.getByRole('button', { name: 'CREATE' }).click()
+
+//   try {
+//     await page.waitForSelector(
+//       '.console-button.mx-1.hidden-sm-and-down.v-btn.v-btn--text.theme--dark.v-size--default',
+//     )
+//     await page.click(
+//       '.console-button.mx-1.hidden-sm-and-down.v-btn.v-btn--text.theme--dark.v-size--default',
+//       { timeout: 5000 },
+//     )
+//     await expect(page).toHaveURL('https://ruxailab-prod.web.app/testslist')
+//   } catch {
+//     console.error('Failed to click button or URL did not match:')
+//     page.close()
+//   }
+// })

firebase-emulator/Dockerfile

@@ -0,0 +1,37 @@
+# We chose node-14 since currently firebase functions work on node-14
+# As from now node-16 is currently in beta for firebase functions
+# But if you want to run the beta you can change node:14-alpine to node:16-alpine
+# https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version
+FROM openjdk:11
+
+# Instala Node.js
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
+# Install the firebase cli
+RUN npm install -g firebase-tools
+
+# Install and setup all the Firebase emulators
+RUN firebase setup:emulators:database
+RUN firebase setup:emulators:firestore
+RUN firebase setup:emulators:storage
+RUN firebase setup:emulators:ui
+
+# Mount your firebase project directory to /app when running the container
+# This is the folder containing the firebase.json
+WORKDIR /firebase-emulator
+
+# Copia los archivos de configuración de Firebase al contenedor
+COPY firebase.json .
+COPY firestore.rules .
+COPY firestore.indexes.json .
+COPY storage.rules .
+
+# Expose the emulator ports
+# If you use non standard ports change them to the ones in your firebase.json
+#       AUTH  FUNC   STORE   FIRE    UI   emulator ports
+EXPOSE 9099 5001 8081 5002 9199 4000 4400 4500 9150 5007
+
+# When startup of the container is complete this is the command that will be executed
+# In our case we want to start the firebase emulator suite
+CMD ["firebase", "emulators:start", "--project", "retlab-dev"]