[TASK] Migrate PageCreationWithDragAndDropCest.php to Playwright

ochorocho · bnf · commit a8f955e3df4b · 2024-12-17T16:04:59.000+01:00
The codeception acceptance test PageCreationWithDragAndDropCest.php had to be skipped since the page tree was migrated to use native browser drag-drop functionality in #102125, because codeception/webdriver can not emulate native drag-drop events. The test is now migrated to an end-to-end test based on Playwright. Playwright is already used for accessibility tests and can now act as a modern replacement for codeception, as it allows to send real mouse and keyboard instructions instead of faking DOM events. Resolves: #105081 Releases: main, 13.4 Change-Id: I282a427395a4d625914f54178e06494357b8e39c Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/86256 Reviewed-by: Benjamin Franzke <ben@bnf.dev> Tested-by: Benjamin Kott <benjamin.kott@outlook.com> Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com> Tested-by: core-ci <typo3@b13.com>
diff --git a/Build/Scripts/runTests.sh b/Build/Scripts/runTests.sh
@@ -175,6 +175,73 @@ getPhpImageVersion() {
     esac
 }
 
+# @todo: Add support for all available database engines (see -d option)
+# @todo: Add support for classic mode
+runPlaywright() {
+    PREPAREPARAMS="-e TYPO3_DB_DRIVER=sqlite"
+    TESTPARAMS="-e typo3DatabaseDriver=pdo_sqlite"
+
+    if [ "${PLAYWRIGHT_USE_EXISTING_INSTANCE}x" = "x" ]; then
+        rm -rf "${CORE_ROOT}/typo3temp/var/tests/playwright-composer" "${CORE_ROOT}/typo3temp/var/tests/playwright-reports" "${CORE_ROOT}/typo3temp/var/tests/playwright-results"
+        ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name playwright-prepare ${XDEBUG_MODE} -e COMPOSER_CACHE_DIR=${CORE_ROOT}/.cache/composer -e COMPOSER_ROOT_VERSION=${COMPOSER_ROOT_VERSION} -e XDEBUG_CONFIG="${XDEBUG_CONFIG}" ${PREPAREPARAMS} ${IMAGE_PHP} "${CORE_ROOT}/Build/Scripts/setupAcceptanceComposer.sh" "typo3temp/var/tests/playwright-composer" sqlite
+        if [[ $? -gt 0 ]]; then
+            kill -SIGINT -$$
+        fi
+    fi
+
+    [[ -e "${CORE_ROOT}/Build/node_modules/.bin/playwright" ]] || ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name playwright-${SUFFIX}-npm-ci \
+        -e HOME=${CORE_ROOT}/.cache \
+        ${IMAGE_NODEJS_CHROME} \
+        npm --prefix=Build ci
+        if [[ $? -gt 0 ]]; then
+            kill -SIGINT -$$
+        fi
+
+    APACHE_OPTIONS="-e APACHE_RUN_USER=#${HOST_UID} -e APACHE_RUN_SERVERNAME=web -e APACHE_RUN_GROUP=#${HOST_PID} -e APACHE_RUN_DOCROOT=${CORE_ROOT}/typo3temp/var/tests/playwright-composer/public -e PHPFPM_HOST=phpfpm -e PHPFPM_PORT=9000"
+    if [[ ${PLAYWRIGHT_PREPARE_ONLY} -eq 1 ]]; then
+        APACHE_OPTIONS="${APACHE_OPTIONS} -p 127.0.0.1::80"
+    fi
+
+    if [ ${CONTAINER_BIN} = "docker" ]; then
+        ${CONTAINER_BIN} run --rm -d --name ac-phpfpm-${SUFFIX} --network ${NETWORK} --network-alias phpfpm --add-host "${CONTAINER_HOST}:host-gateway" ${USERSET} -e PHPFPM_USER=${HOST_UID} -e PHPFPM_GROUP=${HOST_PID} -v ${CORE_ROOT}:${CORE_ROOT} ${IMAGE_PHP} php-fpm ${PHP_FPM_OPTIONS} >/dev/null
+        ${CONTAINER_BIN} run --rm -d --name ac-web-${SUFFIX} --network ${NETWORK} --network-alias web --add-host "${CONTAINER_HOST}:host-gateway" -v ${CORE_ROOT}:${CORE_ROOT} ${APACHE_OPTIONS} ${IMAGE_APACHE} >/dev/null
+    else
+        ${CONTAINER_BIN} run --rm ${CI_PARAMS} -d --name ac-phpfpm-${SUFFIX} --network ${NETWORK} --network-alias phpfpm ${USERSET} -e PHPFPM_USER=0 -e PHPFPM_GROUP=0 -v ${CORE_ROOT}:${CORE_ROOT} ${IMAGE_PHP} php-fpm -R ${PHP_FPM_OPTIONS} >/dev/null
+        ${CONTAINER_BIN} run --rm ${CI_PARAMS} -d --name ac-web-${SUFFIX} --network ${NETWORK} --network-alias web -v ${CORE_ROOT}:${CORE_ROOT} ${APACHE_OPTIONS} ${IMAGE_APACHE} >/dev/null
+    fi
+
+    waitFor web 80
+
+    COMMAND="npm --prefix=${CORE_ROOT}/Build run playwright:run ${PLAYWRIGHT_PROJECT}"
+    COMMAND_UI="npm --prefix=${CORE_ROOT}/Build run playwright:open ${PLAYWRIGHT_PROJECT}"
+    if [[ ${PLAYWRIGHT_PREPARE_ONLY} -eq 0 ]]; then
+        ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name accessibility-${SUFFIX} -e CHROME_SANDBOX=false -e CI=1 ${IMAGE_PLAYWRIGHT} ${COMMAND}
+        SUITE_EXIT_CODE=$?
+    else
+        PLAYWRIGHT_BASE_URL="http://$(${CONTAINER_BIN} port ac-web-${SUFFIX} 80/tcp)/"
+        echo
+        echo -en "\033[32m✓\033[0m "
+        echo "Environment prepared. You can now press Enter to run all tests or run playwright locally with one of the following commands."
+        echo
+        echo "  Run with local playwright (headless):"
+        echo -n "    "
+        echo "PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL}typo3 ${COMMAND}"
+        echo
+        echo "  Open local playwright UI:"
+        echo -n "    "
+        echo "PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL}typo3 ${COMMAND_UI}"
+        echo
+        echo -e "(Press \033[31mControl-C\033[0m to quit, \033[32mEnter\033[0m to run tests in container)"
+        # maybe use https://stackoverflow.com/a/58508884/4223467
+        while read -r _; do
+            ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name accessibility-${SUFFIX} -e CHROME_SANDBOX=false -e CI=1 ${IMAGE_PLAYWRIGHT} ${COMMAND}
+            SUITE_EXIT_CODE=$?
+            echo
+            echo -e "(Press \033[31mControl-C\033[0m to quit, \033[32mEnter\033[0m to re-run tests in container)"
+        done </dev/tty
+    fi
+}
+
 loadHelp() {
     # Load help text into $HELP
     read -r -d '' HELP <<EOF
@@ -228,7 +295,8 @@ Options:
             - lintTypescript: TS linting
             - lintYaml: YAML Linting (excluding Services.yaml)
             - npm: "npm" command dispatcher, to execute various npm commands directly
-            - accessibility: accessibility tests
+            - accessibility: accessibility tests (use accessibility-prepare for manual execution)
+            - e2e: end to end tests (use e2e-prepare for manual execution)
             - phpstan: phpstan tests
             - phpstanGenerateBaseline: regenerate phpstan baseline, handy after phpstan updates
             - unit (default): PHP unit tests
@@ -796,64 +864,25 @@ case ${TEST_SUITE} in
                 ;;
         esac
         ;;
-    accessibility*)
-        [[ "$TEST_SUITE" = 'accessibility-prepare' ]] && ACCESSIBILITY_PREPARE=1 || ACCESSIBILITY_PREPARE=0
-        PREPAREPARAMS="-e TYPO3_DB_DRIVER=sqlite"
-        TESTPARAMS="-e typo3DatabaseDriver=pdo_sqlite"
-
-        if [ "${ACCESSIBILITY_USE_EXISTING_INSTANCE}x" = "x" ]; then
-            rm -rf "${CORE_ROOT}/typo3temp/var/tests/playwright-composer" "${CORE_ROOT}/typo3temp/var/tests/playwright-reports" "${CORE_ROOT}/typo3temp/var/tests/playwright-results"
-            ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name accessibility-prepare ${XDEBUG_MODE} -e COMPOSER_CACHE_DIR=${CORE_ROOT}/.cache/composer -e COMPOSER_ROOT_VERSION=${COMPOSER_ROOT_VERSION} -e XDEBUG_CONFIG="${XDEBUG_CONFIG}" ${PREPAREPARAMS} ${IMAGE_PHP} "${CORE_ROOT}/Build/Scripts/setupAcceptanceComposer.sh" "typo3temp/var/tests/playwright-composer" sqlite
-            if [[ $? -gt 0 ]]; then
-                kill -SIGINT -$$
-            fi
-        fi
-
-        [[ -e "${CORE_ROOT}/Build/node_modules/.bin/playwright" ]] || ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name playwright-${SUFFIX}-npm-ci \
-            -e HOME=${CORE_ROOT}/.cache \
-            ${IMAGE_NODEJS_CHROME} \
-            npm --prefix=Build ci
-            if [[ $? -gt 0 ]]; then
-                kill -SIGINT -$$
-            fi
-
-        APACHE_OPTIONS="-e APACHE_RUN_USER=#${HOST_UID} -e APACHE_RUN_SERVERNAME=web -e APACHE_RUN_GROUP=#${HOST_PID} -e APACHE_RUN_DOCROOT=${CORE_ROOT}/typo3temp/var/tests/playwright-composer/public -e PHPFPM_HOST=phpfpm -e PHPFPM_PORT=9000"
-        if [[ ${ACCESSIBILITY_PREPARE} -eq 1 ]]; then
-            APACHE_OPTIONS="${APACHE_OPTIONS} -p 127.0.0.1::80"
-        fi
-
-        if [ ${CONTAINER_BIN} = "docker" ]; then
-            ${CONTAINER_BIN} run --rm -d --name ac-phpfpm-${SUFFIX} --network ${NETWORK} --network-alias phpfpm --add-host "${CONTAINER_HOST}:host-gateway" ${USERSET} -e PHPFPM_USER=${HOST_UID} -e PHPFPM_GROUP=${HOST_PID} -v ${CORE_ROOT}:${CORE_ROOT} ${IMAGE_PHP} php-fpm ${PHP_FPM_OPTIONS} >/dev/null
-            ${CONTAINER_BIN} run --rm -d --name ac-web-${SUFFIX} --network ${NETWORK} --network-alias web --add-host "${CONTAINER_HOST}:host-gateway" -v ${CORE_ROOT}:${CORE_ROOT} ${APACHE_OPTIONS} ${IMAGE_APACHE} >/dev/null
-        else
-            ${CONTAINER_BIN} run --rm ${CI_PARAMS} -d --name ac-phpfpm-${SUFFIX} --network ${NETWORK} --network-alias phpfpm ${USERSET} -e PHPFPM_USER=0 -e PHPFPM_GROUP=0 -v ${CORE_ROOT}:${CORE_ROOT} ${IMAGE_PHP} php-fpm -R ${PHP_FPM_OPTIONS} >/dev/null
-            ${CONTAINER_BIN} run --rm ${CI_PARAMS} -d --name ac-web-${SUFFIX} --network ${NETWORK} --network-alias web -v ${CORE_ROOT}:${CORE_ROOT} ${APACHE_OPTIONS} ${IMAGE_APACHE} >/dev/null
-        fi
-
-        waitFor web 80
-
-        COMMAND="npm --prefix=${CORE_ROOT}/Build run playwright:run"
-        if [[ ${ACCESSIBILITY_PREPARE} -eq 0 ]]; then
-            ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name accessibility-${SUFFIX} -e CHROME_SANDBOX=false -e CI=1 ${IMAGE_PLAYWRIGHT} ${COMMAND}
-            SUITE_EXIT_CODE=$?
-        else
-            ACCESSIBILITY_BASE_URL="http://$(${CONTAINER_BIN} port ac-web-${SUFFIX} 80/tcp)/"
-            echo
-            echo -en "\033[32m✓\033[0m "
-            echo "Environment prepared. You can now manually run the following command or press Enter to run all tests."
-            echo
-            echo -n "  "
-            echo "ACCESSIBILITY_BASE_URL=${ACCESSIBILITY_BASE_URL}typo3 ${COMMAND}"
-            echo
-            echo -e "(Press \033[31mControl-C\033[0m to quit, \033[32mEnter\033[0m to run tests)"
-            # maybe use https://stackoverflow.com/a/58508884/4223467
-            while read -r _; do
-                ${CONTAINER_BIN} run ${CONTAINER_COMMON_PARAMS} --name accessibility-${SUFFIX} -e CHROME_SANDBOX=false -e CI=1 ${IMAGE_PLAYWRIGHT} ${COMMAND}
-                SUITE_EXIT_CODE=$?
-                echo
-                echo -e "(Press \033[31mControl-C\033[0m to quit, \033[32mEnter\033[0m to re-run tests)"
-            done </dev/tty
-        fi
+    e2e)
+        PLAYWRIGHT_PROJECT="--project e2e"
+        PLAYWRIGHT_PREPARE_ONLY=0
+        runPlaywright
+        ;;
+    e2e-prepare)
+        PLAYWRIGHT_PROJECT="--project e2e"
+        PLAYWRIGHT_PREPARE_ONLY=1
+        runPlaywright
+        ;;
+    accessibility)
+        PLAYWRIGHT_PROJECT="--project accessibility"
+        PLAYWRIGHT_PREPARE_ONLY=0
+        runPlaywright
+        ;;
+    accessibility-prepare)
+        PLAYWRIGHT_PROJECT="--project accessibility"
+        PLAYWRIGHT_PREPARE_ONLY=1
+        runPlaywright
         ;;
     buildCss)
         COMMAND="cd Build; npm ci || exit 1; node_modules/grunt/bin/grunt css"
diff --git a/Build/gitlab-ci.yml b/Build/gitlab-ci.yml
@@ -45,6 +45,7 @@ include:
   # turns this into a branch 'change-patchset' which executes the pipeline
   - local: 'Build/gitlab-ci/pre-merge/acceptance-install.yml'
   - local: 'Build/gitlab-ci/pre-merge/acceptance-application.yml'
+  - local: 'Build/gitlab-ci/pre-merge/e2e.yml'
   - local: 'Build/gitlab-ci/pre-merge/accessibility.yml'
   - local: 'Build/gitlab-ci/pre-merge/integrity.yml'
   - local: 'Build/gitlab-ci/pre-merge/functional.yml'
@@ -55,5 +56,6 @@ include:
   - local: 'Build/gitlab-ci/nightly/acceptance-install.yml'
   - local: 'Build/gitlab-ci/nightly/acceptance-application.yml'
   - local: 'Build/gitlab-ci/nightly/acceptance-application-composer.yml'
+  - local: 'Build/gitlab-ci/nightly/e2e.yml'
   - local: 'Build/gitlab-ci/nightly/accessibility.yml'
   - local: 'Build/gitlab-ci/nightly/functional.yml'
diff --git a/Build/gitlab-ci/nightly/e2e.yml b/Build/gitlab-ci/nightly/e2e.yml
@@ -0,0 +1,14 @@
+e2e playwright composer sqlite 8.4:
+  stage: acceptance
+  tags:
+    - metal2
+  needs: []
+  only:
+    - schedules
+  artifacts:
+    when: on_failure
+    paths:
+      - typo3temp/var/tests/playwright-composer/var/log
+      - typo3temp/var/tests/playwright-reports
+  script:
+    - Build/Scripts/runTests.sh -s e2e -p 8.4 -d sqlite
diff --git a/Build/gitlab-ci/pre-merge/e2e.yml b/Build/gitlab-ci/pre-merge/e2e.yml
@@ -0,0 +1,15 @@
+e2e playwright composer sqlite 8.2 pre-merge:
+  stage: main
+  tags:
+    - metal2
+  except:
+    refs:
+      - schedules
+      - main
+  artifacts:
+    when: on_failure
+    paths:
+      - typo3temp/var/tests/playwright-composer/var/log
+      - typo3temp/var/tests/playwright-reports
+  script:
+    - Build/Scripts/runTests.sh -s e2e -p 8.2 -d sqlite
diff --git a/Build/playwright.config.ts b/Build/playwright.config.ts
@@ -41,6 +41,14 @@ export default defineConfig({
         storageState: path.join(__dirname, '.auth/login.json'),
       },
     },
+    {
+      name: 'e2e',
+      testMatch: 'e2e/**/*.spec.ts',
+      dependencies: ['login'],
+      use: {
+        storageState: path.join(__dirname, '.auth/login.json'),
+      },
+    },
   ],
   outputDir: '../typo3temp/var/tests/playwright-results'
 });
diff --git a/Build/tests/playwright/config.ts b/Build/tests/playwright/config.ts
@@ -1,5 +1,5 @@
 export default {
-  baseUrl: process.env.ACCESSIBILITY_BASE_URL || 'http://web:80/typo3',
+  baseUrl: process.env.PLAYWRIGHT_BASE_URL || 'http://web:80/typo3',
   login: {
     admin: {
       username: process.env.ACCESSIBILITY_BACKEND_ADMIN_USERNAME || 'admin',
diff --git a/Build/tests/playwright/e2e/page-creation-with-drag-and-drop.spec.ts b/Build/tests/playwright/e2e/page-creation-with-drag-and-drop.spec.ts
@@ -0,0 +1,81 @@
+import {test, expect, Locator, Page} from '@playwright/test';
+import config from '../config';
+
+let treeRootElement: Locator;
+let newPageToolbarItem: Locator;
+
+test.beforeEach( async ({page}) => {
+  await page.goto(`${config.baseUrl}/module/web/layout`);
+  await page.waitForLoadState('networkidle');
+
+  treeRootElement = page.locator('#typo3-pagetree-tree [identifier="apps-pagetree-root"]');
+  newPageToolbarItem = page.locator('#typo3-pagetree-toolbar [data-tree-icon="apps-pagetree-page-default"]');
+})
+
+test('Drag and drop new page in node without children', async ({ page }) => {
+  const dummySiteTitle = 'Dummy page tree';
+  await newPageToolbarItem.dragTo(treeRootElement);
+  await page.fill('.node-edit', dummySiteTitle);
+  await page.keyboard.press('Enter');
+  const newPageElement = page.getByRole('treeitem', { name: dummySiteTitle });
+
+  await expect(newPageElement.locator('.node-name')).toHaveText(dummySiteTitle);
+
+  await dragDeletePage(newPageElement);
+});
+
+test('Drag and drop new page in node with children', async ({ page }) => {
+  const dummySiteTitle = 'Dummy page tree';
+  await newPageToolbarItem.dragTo(treeRootElement);
+  await page.fill('.node-edit', dummySiteTitle);
+  await page.keyboard.press('Enter');
+  const newRootPageElement = page.getByRole('treeitem', { name: dummySiteTitle });
+
+  const pageTitle = 'Dummy 1';
+  newPageToolbarItem.dragTo(newRootPageElement);
+  await page.fill('.node-edit', pageTitle);
+  await page.keyboard.press('Enter');
+  const newPageElement = page.getByRole('treeitem', { name: pageTitle });
+
+  await newPageElement.waitFor({ state: 'visible' });
+  await expect(newPageElement.locator('.node-name')).toHaveText(pageTitle);
+
+  await dragDeletePage(newPageElement);
+  await dragDeletePage(newRootPageElement);
+});
+
+test('Drag and drop new page and quit page creation', async ({ page }) => {
+  const pageTitle = 'Dummy quit creation';
+  await newPageToolbarItem.dragTo(treeRootElement);
+
+  await page.fill('.node-edit', pageTitle);
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByRole('treeitem', { name: pageTitle })).not.toBeAttached();
+});
+
+test('Drag and drop new page and leave page title empty', async ({ page }) => {
+  let pageTitle = 'Dummy empty title';
+  await newPageToolbarItem.dragTo(treeRootElement);
+
+  await page.fill('.node-edit', '');
+  await page.keyboard.press('Enter');
+
+  await expect(page.getByRole('treeitem', { name: pageTitle })).not.toBeAttached();
+});
+
+async function dragDeletePage(pageToDelete: Locator) {
+  const box = await pageToDelete.boundingBox();
+  await pageToDelete.dragTo(pageToDelete, {
+    sourcePosition: {
+      x: 10,
+      y: box.height / 2,
+    },
+    targetPosition: {
+      x: box.width - 10,
+      y: box.height / 2,
+    }
+  });
+  await pageToDelete.page().locator('typo3-backend-modal button[name="delete"]').click();
+  await expect(pageToDelete).not.toBeAttached();
+}
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/PageTree/PageCreationWithDragAndDropCest.php b/typo3/sysext/core/Tests/Acceptance/Application/PageTree/PageCreationWithDragAndDropCest.php
diff --git a/typo3/sysext/core/Tests/Acceptance/Support/Helper/Mouse.php b/typo3/sysext/core/Tests/Acceptance/Support/Helper/Mouse.php
diff --git a/typo3/sysext/core/Tests/Acceptance/Support/Helper/PageTree.php b/typo3/sysext/core/Tests/Acceptance/Support/Helper/PageTree.php
