Skip to content

Commit 3c3bed8

Browse files
fredpenafredpena
committed
first commit
1 parent f16811b commit 3c3bed8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+8338
-165
lines changed

‎.github/workflows/playwright-java.yml

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: Playwright UI Tests (JUnit)
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
build-and-test:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v4
16+
17+
- name: Set up Java
18+
uses: actions/setup-java@v4
19+
with:
20+
distribution: 'temurin'
21+
java-version: '21'
22+
23+
- name: Verify Maven installation
24+
run: mvn -version
25+
26+
- name: Build project (skip tests)
27+
run: |
28+
mvn dependency:go-offline -Pproduction
29+
mvn clean package -DskipTests -Pproduction
30+
31+
- name: Install Playwright CLI (Java)
32+
run: mvn exec:exec -Dexec.executable="npx" -Dexec.args="playwright install --with-deps"
33+
34+
- name: Run JUnit tests
35+
run: mvn test
36+
37+
- name: Upload test reports
38+
if: always()
39+
uses: actions/upload-artifact@v4
40+
with:
41+
name: junit-test-reports
42+
path: target/surefire-reports/

‎Dockerfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
FROM eclipse-temurin:21-jre

‎README.md

Lines changed: 58 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,71 @@
1-
# vaadin-playwright-junit
1+
# Pruebas E2E en Vaadin con Playwright y JUnit 5
22

3-
This project can be used as a starting point to create your own Vaadin application with Spring Boot.
4-
It contains all the necessary configuration and some placeholder files to get you started.
3+
Este proyecto es un ejemplo y punto de partida para configurar pruebas End-to-End (E2E) en una aplicación Vaadin,
4+
utilizando Playwright como motor de automatización y JUnit 5 como framework de pruebas.
55

6-
## Running the application
6+
El objetivo es demostrar cómo
7+
integrar pruebas de UI automatizadas en un flujo de desarrollo y de Integración Continua (CI) a través de GitHub
8+
Actions.
79

8-
Open the project in an IDE. You can download the [IntelliJ community edition](https://www.jetbrains.com/idea/download) if you do not have a suitable IDE already.
9-
Once opened in the IDE, locate the `Application` class and run the main method using "Debug".
10+
## Flujo de Trabajo del Proyecto
1011

11-
For more information on installing in various IDEs, see [how to import Vaadin projects to different IDEs](https://vaadin.com/docs/latest/getting-started/import).
12+
El flujo principal de este repositorio se centra en tres áreas clave:
1213

13-
If you install the Vaadin plugin for IntelliJ, you should instead launch the `Application` class using "Debug using HotswapAgent" to see updates in the Java code immediately reflected in the browser.
14+
1. **La Aplicación Vaadin:** Una aplicación web simple
15+
que sirve como sujeto de prueba.
16+
2. **Las Pruebas E2E:** Scripts de prueba que simulan la interacción de un usuario con la
17+
aplicación.
18+
3. **La Integración Continua (CI):** Un pipeline automatizado que ejecuta las pruebas en cada cambio para
19+
garantizar la calidad del código.
1420

15-
## Deploying to Production
21+
## Ejecución de las Pruebas
1622

17-
The project is a standard Maven project. To create a production build, call
23+
### 1. Ejecución en Local
1824

19-
```
20-
./mvnw clean package -Pproduction
25+
Para ejecutar las pruebas en tu máquina, el proyecto utiliza Maven. El siguiente comando compilará la aplicación, la
26+
iniciará, ejecutará las pruebas de Playwright contra ella y finalmente la detendrá.
27+
28+
```shell
29+
./mvnw verify
2130
```
2231

23-
If you have Maven globally installed, you can replace `./mvnw` with `mvn`.
32+
Si tienes Maven instalado globalmente, puedes usar `mvn verify`. Las pruebas se encuentran en el directorio
33+
`src/test/java`.
2434

25-
This will build a JAR file with all the dependencies and front-end resources,ready to be run. The file can be found in the `target` folder after the build completes.
26-
You then launch the application using
27-
```
28-
java -jar target/vaadin-playwright-junit-1.0-SNAPSHOT.jar
35+
### 2. Integración Continua con GitHub Actions
36+
37+
El repositorio incluye un flujo de trabajo preconfigurado en `.github/workflows/playwright-java.yml`. Este workflow se
38+
activa
39+
automáticamente con cada `push` o `pull request` al repositorio y realiza los siguientes pasos:
40+
41+
* Configura el entorno de Java.
42+
* Construye el proyecto.
43+
* Ejecuta el comando `./mvnw verify` para lanzar las pruebas E2E.
44+
45+
Esto asegura que ninguna nueva contribución rompa la funcionalidad existente de la interfaz de usuario.
46+
47+
### 3. Probar GitHub Actions Localmente con `act`
48+
49+
Para validar los cambios en el workflow de GitHub Actions sin necesidad de hacer un `push` al repositorio, puedes usar
50+
`act`. Esta herramienta te permite ejecutar tus workflows de GitHub Actions localmente.
51+
52+
**Pasos para usar act:**
53+
54+
1. **Instala `act`**: Sigue las instrucciones de instalación oficiales.
55+
2. **Ejecuta el workflow**: Desde la raíz del proyecto, simplemente ejecuta el comando:
56+
57+
```shell
58+
act
2959
```
3060

31-
## Project structure
32-
33-
- `MainLayout.java` in `src/main/java` contains the navigation setup (i.e., the
34-
side/top bar and the main menu). This setup uses
35-
[App Layout](https://vaadin.com/docs/components/app-layout).
36-
- `views` package in `src/main/java` contains the server-side Java views of your application.
37-
- `views` folder in `src/main/frontend` contains the client-side JavaScript views of your application.
38-
- `themes` folder in `src/main/frontend` contains the custom CSS styles.
39-
40-
## Useful links
41-
42-
- Read the documentation at [vaadin.com/docs](https://vaadin.com/docs).
43-
- Follow the tutorial at [vaadin.com/docs/latest/tutorial/overview](https://vaadin.com/docs/latest/tutorial/overview).
44-
- Create new projects at [start.vaadin.com](https://start.vaadin.com/).
45-
- Search UI components and their usage examples at [vaadin.com/docs/latest/components](https://vaadin.com/docs/latest/components).
46-
- View use case applications that demonstrate Vaadin capabilities at [vaadin.com/examples-and-demos](https://vaadin.com/examples-and-demos).
47-
- Build any UI without custom CSS by discovering Vaadin's set of [CSS utility classes](https://vaadin.com/docs/styling/lumo/utility-classes).
48-
- Find a collection of solutions to common use cases at [cookbook.vaadin.com](https://cookbook.vaadin.com/).
49-
- Find add-ons at [vaadin.com/directory](https://vaadin.com/directory).
50-
- Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/vaadin) or join our [Forum](https://vaadin.com/forum).
51-
- Report issues, create pull requests in [GitHub](https://github.com/vaadin).
61+
`act` leerá el archivo `.github/workflows/playwright-java.yml` y ejecutará los jobs definidos, dándote feedback
62+
inmediato sobre el
63+
funcionamiento de tu pipeline de CI.
64+
65+
## Estructura del Proyecto
66+
67+
* `src/main/java`: Contiene el código fuente de la aplicación Vaadin que se va a probar.
68+
* `src/test/java`: Contiene las clases de prueba escritas con JUnit 5 y Playwright.
69+
* `.github/workflows/playwright-java.yml`: Define el pipeline de Integración Continua.
70+
* `pom.xml`: Gestiona las dependencias del proyecto, incluyendo Vaadin, Playwright, JUnit y los plugins de Maven
71+
necesarios.

‎htmlReport/css/coverage.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/*
2+
* Copyright 2000-2021 JetBrains s.r.o.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
body {
23+
background-color: #fff;
24+
font-family: helvetica neue, tahoma, arial, sans-serif;
25+
font-size: 82%;
26+
color: #151515;
27+
}
28+
29+
h1 {
30+
margin: 0.5em 0;
31+
color: #010101;
32+
font-weight: normal;
33+
font-size: 18px;
34+
}
35+
36+
h2 {
37+
margin: 0.5em 0;
38+
color: #010101;
39+
font-weight: normal;
40+
font-size: 16px;
41+
}
42+
43+
a {
44+
color: #1564C2;
45+
text-decoration: none;
46+
}
47+
48+
a:hover {
49+
text-decoration: underline;
50+
}
51+
52+
span.separator {
53+
color: #9BA9BA;
54+
padding-left: 5px;
55+
padding-right: 5px;
56+
}
57+
58+
div.content {
59+
width: 99%;
60+
}
61+
62+
table.coverageStats {
63+
width: 100%;
64+
border-collapse: collapse;
65+
}
66+
67+
table.overallStats {
68+
width: 20%;
69+
}
70+
71+
table.coverageStats td, table.coverageStats th {
72+
padding: 4px 2px;
73+
border-bottom: 1px solid #ccc;
74+
}
75+
76+
table.coverageStats th {
77+
background-color: #959BA4;
78+
border: none;
79+
font-weight: bold;
80+
text-align: left;
81+
color: #FFF;
82+
}
83+
84+
table.coverageStats th.coverageStat {
85+
width: 15%;
86+
}
87+
88+
table.coverageStats th a {
89+
color: #FFF;
90+
}
91+
92+
table.coverageStats th a:hover {
93+
text-decoration: none;
94+
}
95+
96+
table.coverageStats th.sortedDesc a {
97+
background: url(../img/arrowDown.gif) no-repeat 100% 2px;
98+
padding-right: 20px;
99+
}
100+
101+
table.coverageStats th.sortedAsc a {
102+
background: url(../img/arrowUp.gif) no-repeat 100% 2px;
103+
padding-right: 20px;
104+
}
105+
106+
div.footer {
107+
margin: 2em .5em;
108+
font-size: 85%;
109+
text-align: left;
110+
line-height: 140%;
111+
}
112+
113+
code.sourceCode {
114+
width: 100%;
115+
border: 1px solid #ccc;
116+
font: normal 12px 'Menlo', 'Bitstream Vera Sans Mono', 'Courier New', 'Courier', monospace;
117+
white-space: pre;
118+
}
119+
120+
code.sourceCode b {
121+
font-weight: normal;
122+
}
123+
124+
code.sourceCode span.number {
125+
color: #151515;
126+
}
127+
128+
code.sourceCode .fc {
129+
background-color: #cfc;
130+
}
131+
132+
code.sourceCode .pc {
133+
background-color: #ffc;
134+
}
135+
136+
code.sourceCode .nc {
137+
background-color: #fcc;
138+
}
139+
140+
.percent, .absValue {
141+
font-size: 90%;
142+
}
143+
144+
.percent .green, .absValue .green {
145+
color: #32cc32;
146+
}
147+
148+
.percent .red, .absValue .red {
149+
color: #f00;
150+
}
151+
152+
.percent .totalDiff {
153+
color: #3f3f3f;
154+
}

0 commit comments

Comments
 (0)