Splitted runners.

.github/workflows/frontend-tests.yml

@@ -75,12 +75,88 @@ jobs:
           cd src
           pnpm exec playwright install
           pnpm exec playwright install-deps
-          pnpm run test-ui
+          pnpm run test-ui -- --project=firefox --project=chromium
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-${{ matrix.node }}
           path: src/playwright-report/
           retention-days: 30
+  playwright-macos:
+    name: playwright-macos
+    runs-on: macos-latest
+    if: ${{ github.actor != 'dependabot[bot]' }}
+
+    steps:
+      -
+        name: Generate Sauce Labs strings
+        id: sauce_strings
+        run: |
+          printf %s\\n '::set-output name=name::${{ github.workflow }} - ${{ github.job }}'
+          printf %s\\n '::set-output name=tunnel_id::${{ github.run_id }}-${{ github.run_number }}-${{ github.job }}'
+      -
+        name: Checkout repository
+        uses: actions/checkout@v4
+      -
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Only install direct dependencies
+        run: pnpm config set auto-install-peers false
+      -
+        name: Install all dependencies and symlink for ep_etherpad-lite
+        run: bin/installDeps.sh
+      -
+        name: export GIT_HASH to env
+        id: environment
+        run: echo "::set-output name=sha_short::$(git rev-parse --short ${{ github.sha }})"
+      -
+        name: Create settings.json
+        run: cp settings.json.template settings.json
+      -
+        name: Disable import/export rate limiting
+        run: |
+          sed -e '/^ *"importExportRateLimiting":/,/^ *\}/ s/"max":.*/"max": 100000000/' -i settings.json
+      - name: Run the frontend tests
+        shell: bash
+        run: |
+          pnpm run dev &
+          connected=false
+          can_connect() {
+          curl -sSfo /dev/null http://localhost:9001/ || return 1
+          connected=true
+          }
+          now() { date +%s; }
+          start=$(now)
+          while [ $(($(now) - $start)) -le 15 ] && ! can_connect; do
+          sleep 1
+          done
+          cd src
+          pnpm exec playwright install
+          pnpm exec playwright install-deps
+          pnpm run test-ui --project=webkit
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-${{ matrix.node }}-macos
+          path: src/playwright-report/
+          retention-days: 30
+
 
 

src/playwright.config.ts

@@ -12,7 +12,8 @@ export default defineConfig({
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: 'html',
-    retries: 3,
+    retries: 2,
+    workers: 20,
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
@@ -33,7 +34,11 @@ export default defineConfig({
             name: 'firefox',
             use: { ...devices['Desktop Firefox'] },
         },
-
+        {
+            name: 'chrome-firefox',
+            use:
+                {...devices['Desktop Firefox'], ...devices['Desktop Chrome']},
+        },
         {
             name: 'webkit',
             use: { ...devices['Desktop Safari'] },

src/tests/frontend-new/helper/padHelper.ts

@@ -115,7 +115,7 @@ export const appendQueryParams = async (page: Page, queryParameters: MapArrayTyp
 
 export const goToNewPad = async (page: Page) => {
     // create a new pad before each test run
-    const padId = "FRONTEND_TESTS"+randomInt(0, 1000);
+    const padId = "FRONTEND_TESTS"+randomInt(0, 10000);
     await page.goto('http://localhost:9001/p/'+padId);
     await page.waitForSelector('iframe[name="ace_outer"]');
     return padId;

src/tests/frontend-new/specs/timeslider_follow.spec.ts

@@ -39,11 +39,7 @@ test.describe('timeslider follow', function () {
             return window.document.querySelector('#innerdocbody')!.getBoundingClientRect().top;
         });
 
-
+        expect(currentOffset).toBeLessThanOrEqual(originalTop);
-        console.log('originalTop', originalTop);
-        console.log('currentOffset', currentOffset);
-
-        expect(currentOffset).toBeLessThan(originalTop);
     });
 
     /**

src/tests/frontend-new/specs/unordered_list.spec.ts

@@ -0,0 +1,127 @@
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    // create a new pad before each test run
+    await goToNewPad(page);
+})
+
+test.describe('unordered_list.js', function () {
+    test.describe('assign unordered list', function () {
+        test('insert unordered list text then removes by outdent', async function ({page}) {
+            const padBody = await getPadBody(page);
+            const originalText = await padBody.locator('div').first().textContent();
+
+            const $insertunorderedlistButton = page.locator('.buttonicon-insertunorderedlist');
+            await $insertunorderedlistButton.click();
+
+            await expect(padBody.locator('div').first()).toHaveText(originalText!);
+            await expect(padBody.locator('div ul li')).toHaveCount(1);
+
+            // remove indentation by bullet and ensure text string remains the same
+            const $outdentButton = page.locator('.buttonicon-outdent');
+            await $outdentButton.click();
+            await expect(padBody.locator('div').first()).toHaveText(originalText!);
+        });
+    });
+
+    test.describe('unassign unordered list', function () {
+        // create a new pad before each test run
+
+
+        test('insert unordered list text then remove by clicking list again', async function ({page}) {
+            const padBody = await getPadBody(page);
+            const originalText = await padBody.locator('div').first().textContent();
+
+            await padBody.locator('div').first().selectText()
+            const $insertunorderedlistButton = page.locator('.buttonicon-insertunorderedlist');
+            await $insertunorderedlistButton.click();
+
+            await expect(padBody.locator('div').first()).toHaveText(originalText!);
+            await expect(padBody.locator('div ul li')).toHaveCount(1);
+
+            // remove indentation by bullet and ensure text string remains the same
+            await $insertunorderedlistButton.click();
+            await expect(padBody.locator('div').locator('ul')).toHaveCount(0)
+        });
+    });
+
+
+    test.describe('keep unordered list on enter key', function () {
+
+        test('Keeps the unordered list on enter for the new line', async function ({page}) {
+            const padBody = await getPadBody(page);
+            await clearPadContent(page)
+            await expect(padBody.locator('div')).toHaveCount(1)
+
+            const $insertorderedlistButton = page.locator('.buttonicon-insertunorderedlist')
+            await $insertorderedlistButton.click();
+
+            // type a bit, make a line break and type again
+            const $firstTextElement = padBody.locator('div').first();
+            await $firstTextElement.click()
+            await page.keyboard.type('line 1');
+            await page.keyboard.press('Enter');
+            await page.keyboard.type('line 2');
+            await page.keyboard.press('Enter');
+
+            await expect(padBody.locator('div span')).toHaveCount(2);
+
+
+            const $newSecondLine = padBody.locator('div').nth(1)
+            await expect($newSecondLine.locator('ul')).toHaveCount(1);
+            await expect($newSecondLine).toHaveText('line 2');
+        });
+    });
+
+    test.describe('Pressing Tab in an UL increases and decreases indentation', function () {
+
+        test('indent and de-indent list item with keypress', async function ({page}) {
+            const padBody = await getPadBody(page);
+            await clearPadContent(page)
+
+            // get the first text element out of the inner iframe
+            const $firstTextElement = padBody.locator('div').first();
+
+            // select this text element
+            await $firstTextElement.selectText();
+
+            const $insertunorderedlistButton = page.locator('.buttonicon-insertunorderedlist');
+            await $insertunorderedlistButton.click();
+
+            await padBody.locator('div').first().click();
+            await page.keyboard.press('Home');
+            await page.keyboard.press('Tab');
+            await expect(padBody.locator('div').first().locator('.list-bullet2')).toHaveCount(1);
+
+            await page.keyboard.press('Shift+Tab');
+
+            await expect(padBody.locator('div').first().locator('.list-bullet1')).toHaveCount(1);
+        });
+    });
+
+    test.describe('Pressing indent/outdent button in an UL increases and decreases indentation ' +
+        'and bullet / ol formatting', function () {
+
+        test('indent and de-indent list item with indent button', async function ({page}) {
+            const padBody = await getPadBody(page);
+
+            // get the first text element out of the inner iframe
+            const $firstTextElement = padBody.locator('div').first();
+
+            // select this text element
+            await $firstTextElement.selectText();
+
+            const $insertunorderedlistButton = page.locator('.buttonicon-insertunorderedlist');
+            await $insertunorderedlistButton.click();
+
+            await page.locator('.buttonicon-indent').click();
+
+            await expect(padBody.locator('div').first().locator('.list-bullet2')).toHaveCount(1);
+            const outdentButton = page.locator('.buttonicon-outdent');
+            await outdentButton.click();
+
+            await expect(padBody.locator('div').first().locator('.list-bullet1')).toHaveCount(1);
+        });
+    });
+});

src/tests/frontend/specs/unordered_list.js

@@ -1,146 +0,0 @@
-'use strict';
-
-describe('unordered_list.js', function () {
-  describe('assign unordered list', function () {
-    // create a new pad before each test run
-    beforeEach(async function () {
-      await helper.aNewPad();
-    });
-
-    it('insert unordered list text then removes by outdent', async function () {
-      const inner$ = helper.padInner$;
-      const chrome$ = helper.padChrome$;
-      const originalText = inner$('div').first().text();
-
-      const $insertunorderedlistButton = chrome$('.buttonicon-insertunorderedlist');
-      $insertunorderedlistButton.trigger('click');
-
-      await helper.waitForPromise(() => {
-        const newText = inner$('div').first().text();
-        return newText === originalText && inner$('div').first().find('ul li').length === 1;
-      });
-
-      // remove indentation by bullet and ensure text string remains the same
-      chrome$('.buttonicon-outdent').trigger('click');
-      await helper.waitForPromise(() => inner$('div').first().text() === originalText);
-    });
-  });
-
-  describe('unassign unordered list', function () {
-    // create a new pad before each test run
-    beforeEach(async function () {
-      await helper.aNewPad();
-    });
-
-    it('insert unordered list text then remove by clicking list again', async function () {
-      const inner$ = helper.padInner$;
-      const chrome$ = helper.padChrome$;
-      const originalText = inner$('div').first().text();
-
-      const $insertunorderedlistButton = chrome$('.buttonicon-insertunorderedlist');
-      $insertunorderedlistButton.trigger('click');
-
-      await helper.waitForPromise(() => {
-        const newText = inner$('div').first().text();
-        return newText === originalText && inner$('div').first().find('ul li').length === 1;
-      });
-
-      // remove indentation by bullet and ensure text string remains the same
-      $insertunorderedlistButton.trigger('click');
-      await helper.waitForPromise(() => inner$('div').find('ul').length !== 1);
-    });
-  });
-
-
-  describe('keep unordered list on enter key', function () {
-    // create a new pad before each test run
-    beforeEach(async function () {
-      await helper.aNewPad();
-    });
-
-    it('Keeps the unordered list on enter for the new line', async function () {
-      const inner$ = helper.padInner$;
-      const chrome$ = helper.padChrome$;
-
-      const $insertorderedlistButton = chrome$('.buttonicon-insertunorderedlist');
-      $insertorderedlistButton.trigger('click');
-
-      // type a bit, make a line break and type again
-      const $firstTextElement = inner$('div span').first();
-      $firstTextElement.sendkeys('line 1');
-      $firstTextElement.sendkeys('{enter}');
-      $firstTextElement.sendkeys('line 2');
-      $firstTextElement.sendkeys('{enter}');
-
-      await helper.waitForPromise(() => inner$('div span').first().text().indexOf('line 2') === -1);
-
-      const $newSecondLine = inner$('div').first().next();
-      const hasULElement = $newSecondLine.find('ul li').length === 1;
-      expect(hasULElement).to.be(true);
-      expect($newSecondLine.text()).to.be('line 2');
-    });
-  });
-
-  describe('Pressing Tab in an UL increases and decreases indentation', function () {
-    // create a new pad before each test run
-    beforeEach(async function () {
-      await helper.aNewPad();
-    });
-
-    it('indent and de-indent list item with keypress', async function () {
-      const inner$ = helper.padInner$;
-      const chrome$ = helper.padChrome$;
-
-      // get the first text element out of the inner iframe
-      const $firstTextElement = inner$('div').first();
-
-      // select this text element
-      $firstTextElement.sendkeys('{selectall}');
-
-      const $insertorderedlistButton = chrome$('.buttonicon-insertunorderedlist');
-      $insertorderedlistButton.trigger('click');
-
-      const e = new inner$.Event(helper.evtType);
-      e.keyCode = 9; // tab
-      inner$('#innerdocbody').trigger(e);
-
-      expect(inner$('div').first().find('.list-bullet2').length === 1).to.be(true);
-      e.shiftKey = true; // shift
-      e.keyCode = 9; // tab
-      inner$('#innerdocbody').trigger(e);
-
-      await helper.waitForPromise(() => inner$('div').first().find('.list-bullet1').length === 1);
-    });
-  });
-
-  describe('Pressing indent/outdent button in an UL increases and decreases indentation ' +
-    'and bullet / ol formatting', function () {
-    // create a new pad before each test run
-    beforeEach(async function () {
-      await helper.aNewPad();
-    });
-
-    it('indent and de-indent list item with indent button', async function () {
-      const inner$ = helper.padInner$;
-      const chrome$ = helper.padChrome$;
-
-      // get the first text element out of the inner iframe
-      const $firstTextElement = inner$('div').first();
-
-      // select this text element
-      $firstTextElement.sendkeys('{selectall}');
-
-      const $insertunorderedlistButton = chrome$('.buttonicon-insertunorderedlist');
-      $insertunorderedlistButton.trigger('click');
-
-      const $indentButton = chrome$('.buttonicon-indent');
-      $indentButton.trigger('click'); // make it indented twice
-
-      expect(inner$('div').first().find('.list-bullet2').length === 1).to.be(true);
-      const $outdentButton = chrome$('.buttonicon-outdent');
-      $outdentButton.trigger('click'); // make it deindented to 1
-
-      await helper.waitForPromise(() => inner$('div').first().find('.list-bullet1').length === 1);
-    });
-  });
-});