Finalize playwright tests

.github/workflows/ci.yml

@@ -215,17 +215,18 @@ jobs:
       with:
         name: online-ui
     - name: Setup webapp server
-      run: |
-        > echo '
+      run: >-
+        echo '
           include_shell "/usr/share/lighttpd/create-mime.conf.pl" 
-          server.document-root = "./site"
+          server.document-root = "/home/runner/work/KappaTools/KappaTools/site"
           server.port = 12345
           server.username = "root"
           server.groupname = "root"
           ' > lighttpd.conf
-        lighttpd -f lighttpd.conf -D
+        lighttpd -f lighttpd.conf -D &
+        sleep 10 && curl -i http://127.0.0.1:12345/index.html # test 
     - name: Run Playwright tests
-      run: DEBUG=pw:webserver npx playwright test
+      run: DEBUG=pw:webserver npx playwright test --retries=3 --trace retain-on-failure
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:

tests/playwright/lighttpd.conf

@@ -1,5 +1,5 @@
 include_shell "/usr/share/lighttpd/create-mime.conf.pl"
-server.document-root = "./build/site"
+server.document-root = var.CWD + "/build/site"
 server.port = 12345
 server.username = "root"
 server.groupname = "root"

tests/playwright/procedure.spec.ts

@@ -68,7 +68,7 @@ test.describe('Editor tab', () => {
     await utils.expect_no_error(page);
   });
 
-  test('contact_map', async ({ page }) => {
+  test('contact_map', async ({ browserName, page }) => {
     await utils.open_app_with_model(page, abc_ka);
     const contact_map = page.locator('#map-container');
     await expect.soft(contact_map).toHaveScreenshot();
@@ -88,11 +88,12 @@ test.describe('Editor tab', () => {
     await expect.soft(contact_map).toHaveScreenshot();
 
     //export
-    await utils.testExports(page, '#export_contact-export', 'map', ['svg', 'png', 'json']);
+    await utils.testExports(page, '#export_contact-export', 'map', ['svg', 'png', 'json'], undefined, browserName);
   });
 
   test('influences', async ({ page }) => {
-    const opts_screen = { threshold: 0.4 }
+    const opts_screen = { threshold: 0.2, maxDiffPixels: 60 }
+    const opts_screen_lenient = { threshold: 0.4, maxDiffPixels: 150 }
     await utils.open_app_with_model(page, abc_ka);
     await page.locator('#navinfluences').click();
     const table = page.locator('#influences-table');
@@ -102,14 +103,14 @@ test.describe('Editor tab', () => {
     await page.getByRole('button', { name: 'First node' }).click();
     await expect.soft(table).toHaveScreenshot();
     await page.locator('#influence-rendering').selectOption('graph');
-    await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen);
+    await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen_lenient);
     await page.locator('#influence-accuracy').selectOption('high');
     await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen);
     await page.getByRole('button', { name: 'Next' }).click();
     await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen);
     await page.getByRole('spinbutton', { name: 'Navigate' }).fill('2');
     await page.getByRole('spinbutton', { name: 'Navigate' }).press('Enter');
-    await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen);
+    await expect.soft(page.getByRole('img')).toHaveScreenshot(opts_screen_lenient); // TODO: check why there is more issues on chromium?
     await page.locator('#influence-rendering').selectOption('tabular');
     await page.getByRole('button', { name: 'Track cursor' }).click();
     await page.locator('div:nth-child(10) > .CodeMirror-line > span > span:nth-child(7)').scrollIntoViewIfNeeded();
@@ -170,7 +171,7 @@ A(c[1]),C(a[1])
   });
 
   test('constraints_and_polymers_3', async ({ page }) => {
-    await utils.open_app_with_model(page, local_views_slide_69_ka, true);
+    await utils.open_app_with_model(page, local_views_slide_69_ka, true, 20000);
     await page.locator('#navconstraints').click();
     await expect.soft(constraint_locator(page, 0)).toHaveText(
       `E(x)  =>  [ E(x[.]) v E(x[x.R]) ]
@@ -215,7 +216,8 @@ R(CN[C.R],CR[CR.R])  =>  R(CN[2],CR[1]),R(C[2],CR[1])
   });
 
   test('contact_map_accuracy', async ({ page }) => {
-    await utils.open_app_with_model(page, minikai_counters_ka, false, 50000);
+    test.setTimeout(180000)
+    await utils.open_app_with_model(page, minikai_counters_ka, false, 120000);
     const contact_map = page.locator('#map-container');
     await expect.soft(contact_map).toHaveScreenshot();
     await page.locator('#contact_map-accuracy').selectOption('high');
@@ -226,7 +228,7 @@ R(CN[C.R],CR[CR.R])  =>  R(CN[2],CR[1]),R(C[2],CR[1])
 
 test.describe('Simulation tools', () => {
 
-  test('Simulation, plot', async ({ page }) => {
+  test('Simulation, plot', async ({ browserName, page }) => {
     await utils.open_app_with_model(page, abc_ka);
     await utils.setSeed(page, 1);
     // Run simulation to 30, then 100, then test plot options
@@ -262,7 +264,8 @@ test.describe('Simulation tools', () => {
     await page.locator('.panel-footer').click(); // needed for update
     await expect.soft(page.getByRole('img')).toHaveScreenshot();
 
-    await utils.testExports(page, '#export_plot-export', 'plot', ['svg', 'csv', 'json', 'tsv', 'png']);
+    await utils.testExports(page, '#export_plot-export', 'plot', ['csv', 'json', 'tsv'], undefined);
+    await utils.testExports(page, '#export_plot-export', 'plot', ['svg', 'png'], undefined, browserName);
 
     // Test larger plots, slider
     await utils.set_pause_if(page, '[T] > 2000');
@@ -294,13 +297,21 @@ test.describe('Simulation tools', () => {
     // Run simulation to 30, then 100, then test plot options
     await utils.set_pause_if(page, '[T] > 30');
     await page.getByRole('button', { name: 'start' }).click();
+
+    await page.waitForTimeout(3000);
+    // await utils.wait_for_file_load(page, { timeout: 20000 }); // TODO: fix: glyphicon doesn't show properly
+    //
     await page.locator('#navDIN').click();
     await expectScreenShotDINTable();
 
     await utils.testExports(page, '#export_din-export', 'flux', ['json', 'dot', 'html']);
 
     await utils.set_pause_if(page, '[T] > 60');
     await page.getByRole('button', { name: 'continue' }).click();
+
+    await page.waitForTimeout(3000);
+    // await utils.wait_for_file_load(page, { timeout: 20000 }); // TODO: fix: glyphicon doesn't show properly
+    //
     await expectScreenShotDINTable();
     await page.getByRole('combobox').first().selectOption('flux.json');
     await expectScreenShotDINTable();
@@ -311,18 +322,20 @@ test.describe('Simulation tools', () => {
     await expectScreenShotDINTable();
   });
 
-  test('snapshots', async ({ page }) => {
+  test('snapshots', async ({ browserName, page }) => {
     await utils.open_app_with_model(page, abc_ka);
     await utils.setSeed(page, 1);
 
     // Generate two snapshots
     await utils.set_pause_if(page, '[T] > 30');
     await page.getByRole('button', { name: 'start' }).click();
+    await utils.wait_for_sim_stop(page, { timeout: 10000 });
     await utils.apply_perturbation(page, '');
     await expect.soft(utils.get_error_field(page)).toHaveText(" « 1/1 » [] Problematic effect list ");
     await utils.apply_perturbation(page, '$SNAPSHOT');
     await utils.set_pause_if(page, '[T] > 60');
     await page.getByRole('button', { name: 'continue' }).click();
+    await utils.wait_for_sim_stop(page, { timeout: 10000 });
     await utils.apply_perturbation(page, '$SNAPSHOT "T60"');
 
     // check log page
@@ -399,11 +412,18 @@ test.describe('Simulation tools', () => {
     await utils.testExports(page, "#export_snapshot_kappa", "snapshot_kappa", ["json", "kappa", "dot"],
       ['', '', '"#\\w{5,6}"']);
     await page.locator('#format_select_id').selectOption('Graph');
-    await utils.testExports(page, "#export_snapshot_graph", "snapshot_graph", ["json", "kappa", "dot", "svg", "png"],
-      ['', '', '"#\\w{5,6}"', '<svg class="svg-group" id="map-container".*', '']);
+    await utils.testExports(page, "#export_snapshot_graph", "snapshot_graph", ["json", "kappa", "dot"], ['', '', '"#\\w{5,6}"']);
+
+    await utils.testExports(page, "#export_snapshot_graph", "snapshot_graph", ["svg"],
+      ['<svg class="svg.*'], browserName);
+    if (browserName != "chromium") {
+      await utils.testExports(page, "#export_snapshot_graph", "snapshot_graph", ["png"],
+        [""], browserName);
+    }
     // note: dot and svg export have special change as there is variance on their outputs if ran in playwright through the cli or through --ui …
     // dot : don't check colors, svg: only check there is a svg header
-    // TODO: more complete match for svg, where the difference seems to be in the sizes…
+    // TODO: more complete match for svg, where the difference seems to be in the sizes…, check png
+    // Graphics are different between firefox and chrome… and on chrome png is also different between --ui and cli uuuuuh
 
   });
 
@@ -414,13 +434,17 @@ test.describe('Simulation tools', () => {
     // Generate two snapshots
     await utils.set_pause_if(page, '[T] > 30');
     await page.getByRole('button', { name: 'start' }).click();
+    await utils.wait_for_sim_stop(page, { timeout: 10000 });
     const print_time = '$PRINT "time: ".[T] > "time.txt"';
     const print_ab = '$PRINT \'AB\' > "ab.txt"';
     await utils.apply_perturbation(page, print_time);
+    await page.waitForTimeout(500);
     await utils.apply_perturbation(page, print_ab);
     await utils.set_pause_if(page, '[T] > 60');
     await page.getByRole('button', { name: 'continue' }).click();
+    await utils.wait_for_sim_stop(page, { timeout: 10000 });
     await utils.apply_perturbation(page, print_time);
+    await page.waitForTimeout(500);
     await utils.apply_perturbation(page, print_ab);
 
     // check log page
@@ -688,6 +712,9 @@ test.describe('projects_and_files', () => {
       // await page.waitForTimeout(2000);
       await expect(locator_project_tabs_list.locator('li').nth(n)).toHaveClass("active", { timeout: 10000 });
     }
+    async function wait_for_project_nb(nb: number) {
+      await utils.expect_locator_toHaveInnerHtml(page, locator_project_tabs_text.nth(nb), "New project", 5000);
+    }
 
     // open new project
     const project_name = 'new_project'
@@ -697,14 +724,17 @@ test.describe('projects_and_files', () => {
     await page.getByPlaceholder('project new').click();
     await page.getByPlaceholder('project new').fill(project_name);
     await page.getByPlaceholder('project new').press('Enter');
+    await wait_for_project_nb(2);
     // add new file "abc.ka" and fill it
     await page.getByRole('button', { name: 'File' }).click();
     await page.locator('#menu-editor-file-new-li').click();
     await page.getByRole('textbox', { name: 'file name' }).click();
     await page.getByRole('textbox', { name: 'file name' }).fill('abc.ka');
     await page.getByRole('textbox', { name: 'file name' }).press('Enter');
+    await page.waitForTimeout(5000);
     await page.locator('.CodeMirror-scroll').click();
     await utils.input_in_editor_from_url(page, abc_ka);
+    await utils.wait_for_file_load(page, { timeout: 10000 });
 
     // switch and check contact_map change
     const contact_map = page.locator('#map-container');
@@ -758,6 +788,7 @@ test.describe('projects_and_files', () => {
 %mod: [true] do $TRACK 'S++' [true] ;
 `
     );
+    await utils.wait_for_file_load(page, { timeout: 10000 });
     const contact_map = page.locator('#map-container');
     await expect.soft(contact_map).toHaveScreenshot();