Mentions légales du service

Skip to content
Snippets Groups Projects
Commit c0daa414 authored by VIAUD Nathan's avatar VIAUD Nathan
Browse files

Adding functionnal playwright test

parent 133df0c9
No related branches found
No related tags found
1 merge request!34Draft: Resolve "Test Playwright for e2e test framework"
Hide whitespace changes
Inline Side-by-side
Showing
with 182 additions and 108 deletions
intro.png deleted 100644 → 0
+ 0
− 0
View file @ 133df0c9
intro.png

16.9 KiB

new_project.png deleted 100644 → 0
+ 0
− 0
View file @ 133df0c9
new_project.png

16.9 KiB

package.json
+ 1
− 0
View file @ c0daa414
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"build": "vue-tsc --noEmit && cross-env ELECTRON=true vite build && npm run electron:builder", "build": "vue-tsc --noEmit && cross-env ELECTRON=true vite build && npm run electron:builder",
"build-all": "npm run build -- -- --linux deb --win nsis --mac zip", "build-all": "npm run build -- -- --linux deb --win nsis --mac zip",
"test": "vitest", "test": "vitest",
"e2e": "npx playwright test --workers=1",
"coverage": "vitest --coverage", "coverage": "vitest --coverage",
"wdio": "wdio run ./wdio.conf.ts", "wdio": "wdio run ./wdio.conf.ts",
"lint": "npx eslint ./src ./test ./electron/* --ext .ts,.vue,.js", "lint": "npx eslint ./src ./test ./electron/* --ext .ts,.vue,.js",
......
public/splash.html
+ 1
− 1
View file @ c0daa414
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<title>ePoc Editor</title> <title>ePoc Editor</title>
</head> </head>
<body> <body>
<div class="card card-splash"> <div id="splash-screen" class="card card-splash">
<div class="content-splash"> <div class="content-splash">
<img class="logo-epoc-splash" src="img/epoc.svg" alt="logo ePoc"> <img class="logo-epoc-splash" src="img/epoc.svg" alt="logo ePoc">
<div class="bottom-splash"> <div class="bottom-splash">
......
src/features/ePocFlow/nodes/ChapterNode.vue
+ 1
− 1
View file @ c0daa414
...@@ -46,7 +46,7 @@ function openForm() { ...@@ -46,7 +46,7 @@ function openForm() {
</script> </script>
<template> <template>
<div> <div :id="id">
<ContentButton <ContentButton
:icon="currentNode.data.action.icon" :icon="currentNode.data.action.icon"
:is-draggable="false" :is-draggable="false"
......
src/features/ePocFlow/nodes/ePocNode.vue
+ 1
− 1
View file @ c0daa414
...@@ -30,7 +30,7 @@ function openForm() { ...@@ -30,7 +30,7 @@ function openForm() {
</script> </script>
<template> <template>
<div> <div :id="id">
<ContentButton <ContentButton
:icon="currentNode.data.action.icon" :icon="currentNode.data.action.icon"
:is-draggable="false" :is-draggable="false"
......
src/features/forms/components/inputs/RepeatInput.vue
+ 1
− 1
View file @ c0daa414
...@@ -104,7 +104,7 @@ function onClick(index, action) { ...@@ -104,7 +104,7 @@ function onClick(index, action) {
@end="dragging = false" @end="dragging = false"
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<div :key="index" class="card draggable-card"> <div :key="index" class="card draggable-card" :class="label">
<div <div
class="card-header" class="card-header"
:class="{ 'border-bottom': inputs.length >= 1, 'clickable': element.action }" :class="{ 'border-bottom': inputs.length >= 1, 'clickable': element.action }"
......
src/features/sideBar/components/SideActions.vue
+ 1
− 0
View file @ c0daa414
...@@ -55,6 +55,7 @@ function showTemplateMenu() { ...@@ -55,6 +55,7 @@ function showTemplateMenu() {
<template #item="{ element, index }"> <template #item="{ element, index }">
<div> <div>
<ContentButton <ContentButton
:id="element.type"
:key="index" :key="index"
v-tippy="{content: element.tooltip, placement: 'right', arrow : true, arrowType : 'round', animation : 'fade'}" v-tippy="{content: element.tooltip, placement: 'right', arrow : true, arrowType : 'round', animation : 'fade'}"
:icon="element.icon" :icon="element.icon"
......
src/shared/stores/projectStore.ts
+ 2
− 1
View file @ c0daa414
...@@ -70,7 +70,8 @@ export const useProjectStore = defineStore('project', { ...@@ -70,7 +70,8 @@ export const useProjectStore = defineStore('project', {
}; };
} }
const newChapter: Node = { const newChapter: Node = {
id: (nodes.value.length + 1).toString(), //? First 2 are for the epoc and the add button
id: (chapters.length + 3).toString(),
type: 'chapter', type: 'chapter',
position: {x: 0, y: (chapters.length + 1) * 200}, position: {x: 0, y: (chapters.length + 1) * 200},
data, data,
......
src/views/LandingPage.vue
+ 2
− 2
View file @ c0daa414
...@@ -28,11 +28,11 @@ function createProject() { ...@@ -28,11 +28,11 @@ function createProject() {
</div> </div>
<div v-if="!editorStore.loading"> <div v-if="!editorStore.loading">
<div class="buttons"> <div class="buttons">
<button class="btn btn-outline btn-large" @click="pickProject"> <button id="pick-button" class="btn btn-outline btn-large" @click="pickProject">
<i class="icon-ouvrir" /> <i class="icon-ouvrir" />
Ouvrir un projet existant Ouvrir un projet existant
</button> </button>
<button class="btn btn-outline btn-large" @click="createProject"> <button id="pick-button" class="btn btn-outline btn-large" @click="createProject">
<i class="icon-creer" /> <i class="icon-creer" />
Créer un nouveau projet Créer un nouveau projet
</button> </button>
......
tests/e2e.spec.ts 0 → 100644
+ 172
− 0
View file @ c0daa414
import { test } from '@playwright/test';
const { _electron: electron } = require('playwright');
let electronApp;
let window;
test.describe('create a new ePoc', () => {
test.beforeAll(async () => {
electronApp = await electron.launch({ args: ['electron/electron.js'] });
await sleep(2000);
window = await electronApp.firstWindow();
});
test.afterAll(async () => {
await electronApp.close();
});
test('create a new project', (async () => {
await window.click('text=Créer un nouveau projet');
await sleep(2000);
}));
test('create a new chapter', (async () => {
await addChapter(window);
await sleep(500);
}));
test('drag & drop a text node', (async () => {
const source = await window.$('#text');
const sourceBox = await source.boundingBox();
const dropLocation = { x: sourceBox.x + sourceBox.width + 400, y: sourceBox.y + sourceBox.height + 400 };
await dragDrop(source, dropLocation, window);
await sleep(500);
}));
test('link a node', (async () => {
const nodes = await window.$$eval('.node', nodes => nodes.map(node => node.id.substr(4)));
const sourceId = '3';
const targetId = await nodes[0];
await linkHandle(sourceId, targetId, window);
await sleep(500);
}));
test('adding an element to node', async () => {
const nodes = await window.$('.node');
const targetBox = await nodes.boundingBox();
const source = await window.$('#video');
//! Doesn't work if doing + targetBox.width/2
await dragDrop(source, { x: targetBox.x + 50, y: targetBox.y + 50 }, window);
await sleep(500);
});
test('openening the epoc form', async () => {
const epocNode = await window.$('.vue-flow__node-epoc');
await epocNode.click();
await sleep(1500);
await window.mainFrame().waitForSelector('.formPanel');
});
test('filling the epoc form', async () => {
const titleInput = await window.$('#Titre');
await titleInput.fill('Titre de l\'ePoc généré par Playwright');
const descriptionInput = await window.$('.ql-editor');
await descriptionInput.fill('Description générée par Playwright');
const addButtons = await window.$$('.add-card');
const addAuthorButton = addButtons[0];
await addAuthorButton.click();
await sleep(500);
await addAuthorButton.click();
const authorCards = await window.$$('.Auteur');
const firstAuthor = {
name: 'Jhon Doe',
role: 'Chercheur',
description: 'Description de l\'auteur générée par Playwright'
};
const secondAuthor = {
name: 'Jane Doe',
role: 'Chercheuse',
description: 'Description de l\'auteur générée par Playwright'
};
await fillAuthorForm(firstAuthor, authorCards[0]);
await fillAuthorForm(secondAuthor, authorCards[1]);
const addObjectiveButton = addButtons[1];
await addObjectiveButton.click();
await sleep(500);
await addObjectiveButton.click();
const cards = await window.$$('.Objectif');
await fillObjective('first objective generated by playwright', cards[0]);
await fillObjective('second objective generated by playwright', cards[1]);
});
test('openening the first chapter form', async () => {
const chapterNode = await window.$('.vue-flow__node-chapter');
await chapterNode.click();
await sleep(1500);
await window.mainFrame().waitForSelector('.formPanel');
});
test('fill the first chapter form', async() => {
const titleInput = await window.$('#Titre');
await titleInput.fill('Titre du chapitre généré par Playwright');
await sleep(500);
const addButton = await window.$('.add-card');
await addButton.click();
await sleep(500);
await addButton.click();
const cards = await window.$$('.Objectif');
await fillObjective('first objective generated by playwright', cards[0]);
await fillObjective('second objective generated by playwright', cards[1]);
await sleep(500);
});
});
async function dragDrop(source, dropLocation, window) {
await source.hover();
await window.mouse.down();
await window.mouse.move(dropLocation.x, dropLocation.y);
await window.mouse.up();
}
async function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function addChapter(window) {
const addChapterButton = await window.$('.add-chapter');
await addChapterButton.click();
}
async function linkHandle(sourceId, targetId, window) {
const sourceHandleId = `vue-flow__handle-${sourceId}__handle-right`;
const targetHandleId = `vue-flow__handle-${targetId}__handle-left`;
const sourceHandle = await window.$(`.${sourceHandleId}`);
const targetHandle = await window.$(`.${targetHandleId}`);
await dragDrop(sourceHandle, await targetHandle.boundingBox(), window);
}
async function fillAuthorForm(values, card) {
// console.log('log', card);
const nameInput = await card.$('#Nom');
await nameInput.fill(values.name);
const roleInput = await card.$('#Titre');
await roleInput.fill(values.role);
const descriptionInput = await card.$('.ql-editor');
await descriptionInput.fill(values.description);
}
async function fillObjective(value, card) {
const input = await card.$('.input-textarea');
await input.fill(value);
}
\ No newline at end of file
tests/electron.spec.ts deleted 100644 → 0
+ 0
− 27
View file @ 133df0c9
const { _electron: electron } = require('playwright');
(async () => {
// Launch Electron app.
const electronApp = await electron.launch({ args: ['main.ts'] });
// Evaluation expression in the Electron context.
const appPath = await electronApp.evaluate(async ({ app }) => {
// This runs in the main Electron process, parameter here is always
// the result of the require('electron') in the main app script.
return app.getAppPath();
});
console.log(appPath);
// Get the first window that the app opens, wait if necessary.
const window = await electronApp.firstWindow();
// Print the title.
console.log(await window.title());
// Capture a screenshot.
await window.screenshot({ path: 'intro.png' });
// Direct Electron console to Node terminal.
window.on('console', console.log);
// Click button.
await window.click('text=Click me');
// Exit app.
await electronApp.close();
})();
tests/example.spec.ts deleted 100644 → 0
+ 0
− 74
View file @ 133df0c9
import { test, expect, ElectronApplication, Page } from '@playwright/test';
// test('has title', async ({ page }) => {
// await page.goto('https://playwright.dev/');
// // Expect a title "to contain" a substring.
// await expect(page).toHaveTitle(/Playwright/);
// });
// test('get started link', async ({ page }) => {
// await page.goto('https://playwright.dev/');
// // Click the get started link.
// await page.getByRole('link', { name: 'Get started' }).click();
// // Expects the URL to contain intro.
// await expect(page).toHaveURL(/.*intro/);
// });
const { _electron: electron } = require('playwright');
test('launch electron app', (async () => {
// Launch Electron app.
const electronApp = await electron.launch({ args: ['electron/electron.js'] });
// Evaluation expression in the Electron context.
const appPath = await electronApp.evaluate(async ({ app }) => {
// This runs in the main Electron process, parameter here is always
// the result of the require('electron') in the main app script.
return app.getAppPath();
});
console.log(appPath);
// Get the first window that the app opens, wait if necessary.
const window = await electronApp.firstWindow();
// Print the title.
console.log(await window.title());
const pages = await electronApp.context().pages();
console.log('pages ', await pages);
const landingPage = await pages[1];
console.log('landing page:', await landingPage);
// console.log(landingPage.getByText('Créer un nouveau projet'));
// const windows = await electronApp.windows();
// console.log('windows:', windows.length);
// await landingPage.screenshot({ path: 'landingPage.png' });
// setTimeout(async () => {
// const landingPage = await electronApp.firstWindow();
// const buttons = await landingPage.getByRole('button');
// console.log(buttons);
// }, 5000);
// const buttons = window.getByRole('button')
// await window.getByRole('button', { name: 'Créer un nouveau projet' }).click();
// await button.click();
// await window.screenshot({ path: 'new_project.png' });
// Capture a screenshot.
// await window.screenshot({ path: 'intro.png' });
// // Direct Electron console to Node terminal.
// window.on('console', console.log);
// // Click button.
// await window.click('text=Click me');
// // Exit app.
// await electronApp.close();
}));
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment