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"]