playwright: Update to latest versions and add new page objects

- Update `playwright` to the latest version
  - Update test configuration to adapt to latest version
  - Remove obsolete multiple config files and scripts
- Add page objects for OutputView, OutputChannel, Toolbar
- Extend tests by testing the new page objects
- Extend ExplorerView tests with compact folders
- Extend QuickCommand tests
- Update README

Signed-off-by: Nina Doschek <ndoschek@eclipsesource.com>

.vscode/launch.json

@@ -176,21 +176,6 @@
       "outFiles": [
         "${workspaceFolder}/../.js"
       ]
-    },
-    {
-      "name": "Run Playwright Test",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/examples/playwright/node_modules/.bin/playwright",
-      "args": [
-        "test",
-        "--debug",
-        "--config=./configs/playwright.debug.config.ts",
-        "${fileBasenameNoExtension}"
-      ],
-      "cwd": "${workspaceFolder}/examples/playwright",
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen"
     }
   ],
   "compounds": [

examples/playwright/.eslintrc.js

@@ -1,12 +1,20 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-    extends: [
-        '../../configs/build.eslintrc.json',
-        './configs/ui-tests.eslintrc.json',
-        './configs/ui-tests.playwright.eslintrc.json'
-    ],
+    extends: ['../../configs/build.eslintrc.json'],
+    ignorePatterns: ['playwright.config.ts'],
     parserOptions: {
         tsconfigRootDir: __dirname,
         project: 'tsconfig.json'
-    }
+    },
+    overrides: [
+        {
+            files: ['*.ts'],
+            rules: {
+                // override existing rules for playwright test package
+                "no-null/no-null": "off",
+                "no-undef": "off", // disabled due to 'browser', '$', '$$'
+                "no-unused-expressions": "off"
+            }
+        }
+    ]
 };

examples/playwright/docs/DEVELOPING.md

@@ -20,7 +20,15 @@ You may also use the `Launch Browser Backend` launch configuration in VS Code.
 To start the tests run `yarn ui-tests` in the root of this package. This will start the tests located in `src/tests` in a headless mode.
 
 To only run a single test file, the path of a test file can be set with `yarn ui-tests <path-to-file>` or `yarn ui-tests -g "<partial test file name>"`.
-See the [Playwright Test command line documentation](https://playwright.dev/docs/intro#command-line).
+See the [Playwright Test command line documentation](https://playwright.dev/docs/running-tests#command-line).
+
+### Running the tests headful
+
+To start the tests in a headful mode run `yarn ui-tests-headful` in the root of this package. This will start the tests located in `src/tests` in a headful mode.
+
+### Watch the tests
+
+To watch, run `yarn watch` in the root of this package. This ensures, that the testing code is up-to-date also for executing via the Playwright VSCode Extension.
 
 ### Debugging the tests
 

examples/playwright/docs/GETTING_STARTED.md

@@ -12,7 +12,7 @@ The most important files in the theia-playwright-template are:
 
 * Example test in `tests/theia-app.test.ts`
 * Example page object in `test/page-objects/theia-app.ts`
-* Configuration files in `configs`, including the base playwright configuration at `configs/playwright.config.ts`
+* The base Playwright configuration file at `playwright.config.ts`
 * `package.json` with all required dependencies and scripts for running and debugging the tests
 
 Now, let's run the tests:
@@ -123,35 +123,47 @@ This keeps your tests independent of the underlying browser automation framework
 Before running your tests, the Theia application under test needs to be running.
 This repository already provides an example Theia application, however, you might want to test your custom Theia-based application instead.
 
-To run the application provided in this repository, run `yarn browser start` in the root of this repository after building everything with `yarn`.
-You may also use the `Launch Browser Backend` launch configuration in VS Code.
+The Playwright configuration however is aware of that and starts the backend (`yarn theia:start`) on port 3000 if not already running.
+This is valid for executing tests via the VSCode extension and via CLI.
 
-### Running the tests headless
+### Running the tests in VSCode via the Playwright extension
+
+For quick and easy execution of tests in VSCode, please install the extension [`ms-playwright.playwright`](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
+
+To quickly start the playwright tests, open the playwright testing extension and click the `Run Tests` button on the top toolbar or the `Run Test` for a particular test.
+It uses the default configuration with chromium as test profile by default.
+
+To run the tests headful, simply enable the checkbox `Show browser` in the Playwright testing extension.
+
+### Running the tests headless via CLI
 
 To start the tests run `yarn ui-tests` in the folder `playwright`.
 This will start the tests in a headless state.
 
 To only run a single test file, the path of a test file can be set with `yarn ui-tests <path-to-file>` or `yarn ui-tests -g "<partial test file name>"`.
 See the [Playwright Test command line documentation](https://playwright.dev/docs/intro#command-line).
 
-### Running the tests headfull
+### Running the tests headful via CLI
 
 If you want to observe the execution of the tests in a browser, use `yarn ui-tests-headful` for all tests or `yarn ui-tests-headful <path-to-file>` to only run a specific test.
 
-### Debugging the tests
+### Debugging the tests via the Playwright extension
 
-To debug a test, open the test file in the code editor and run the `Run Playwright Test` configuration inside VS Code.
-This will start the Playwright inspector and debug the currently opened test file.
-Using this approach, you will be able to observe the tests in the browser and set breakpoints in VSCode.
+To debug playwright tests, open the playwright testing extension and click the `Debug Tests` button on the top toolbar or the `Debug Test` for a particular test.
+It uses the default configuration with chromium as test profile by default.
 
-_Note that the tests need to be started in the playwright inspector again, as playwright pauses once the test reaches the `page.goto()` call._
+For more information on debugging, please refer to the [Playwright documentation](https://playwright.dev/docs/debug).
 
-The Playwright inspector contains an editor that shows the currently executed code and offers debugging capabilities, which can be used instead of attaching the VS code debugger.
+### UI Mode - Watch and Trace Mode
 
-The launched browser instance contains some additional features that are useful to debugging playwright tests. The browsers console contains a playwright object, which can be used to test the playwright API.
-For example the result of a given selector can be inspected. Additionally, this browser instance offers some quality of life improvements, such as preventing to resize the web application when the developer tools are opened, etc.
+For an advanced test development experience, Playwright introduced the UI Mode. To enable this, simply add the flag `--ui` to the CLI command.
+I.e. run the following command:
 
-For more information on debugging, please refer to the [Playwright documentation](https://playwright.dev/docs/debug).
+```bash
+yarn ui-tests --ui
+```
+
+For more information on the UI mode,  please refer to the [Playwright announcement of the UI mode](https://playwright.dev/docs/release-notes#introducing-ui-mode-preview).
 
 ## Advanced Topics
 

examples/playwright/package.json

@@ -13,13 +13,14 @@
   "homepage": "https://github.com/eclipse-theia/theia",
   "scripts": {
     "clean": "rimraf lib *.tsbuildinfo",
-    "build": "tsc --incremental && npx playwright install chromium",
+    "build": "tsc --incremental && yarn playwright:install",
+    "watch": "tsc -w --incremental",
     "theia:start": "rimraf .tmp.cfg && THEIA_CONFIG_DIR=$PWD/.tmp.cfg yarn --cwd ../browser start",
     "lint": "eslint -c ./.eslintrc.js --ext .ts ./src",
     "lint:fix": "eslint -c ./.eslintrc.js --ext .ts ./src --fix",
-    "ui-tests": "yarn && playwright test --config=./configs/playwright.config.ts",
-    "ui-tests-ci": "yarn && playwright test --config=./configs/playwright.ci.config.ts",
-    "ui-tests-headful": "yarn && playwright test --config=./configs/playwright.headful.config.ts",
+    "playwright:install": "playwright install chromium",
+    "ui-tests": "yarn && playwright test",
+    "ui-tests-headful": "yarn && playwright test --headed",
     "ui-tests-report-generate": "allure generate ./allure-results --clean -o allure-results/allure-report",
     "ui-tests-report": "yarn ui-tests-report-generate && allure open allure-results/allure-report"
   },
@@ -28,13 +29,13 @@
     "src"
   ],
   "dependencies": {
-    "@playwright/test": "^1.30.0",
+    "@playwright/test": "^1.32.1",
     "fs-extra": "^9.0.8"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.8",
-    "allure-commandline": "^2.13.8",
-    "allure-playwright": "^2.0.0-beta.14"
+    "allure-commandline": "^2.21.0",
+    "allure-playwright": "^2.1.0"
   },
   "publishConfig": {
     "access": "public"

examples/playwright/configs/playwright.config.ts → examples/playwright/playwright.config.ts

@@ -14,29 +14,35 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
-    testDir: '../lib/tests',
-    testMatch: ['**/*.js'],
-    workers: 2,
+// Note: process.env.CI is always set to true for GitHub Actions
+
+export default defineConfig({
+    testDir: './lib/tests',
+    testMatch: ['**/*.test.js'],
+    workers: process.env.CI ? 1 : 2,
+    retries: process.env.CI ? 1 : 0,
     // Timeout for each test in milliseconds.
-    timeout: 60 * 1000,
+    timeout: 30 * 1000,
     use: {
         baseURL: 'http://localhost:3000',
         browserName: 'chromium',
         screenshot: 'only-on-failure',
         viewport: { width: 1920, height: 1080 }
     },
-    snapshotDir: '../src/tests/snapshots',
+    snapshotDir: './src/tests/snapshots',
     expect: {
-        toMatchSnapshot: { threshold: 0.15 }
+        toMatchSnapshot: { threshold: 0.01 }
     },
     preserveOutput: 'failures-only',
-    reporter: [
-        ['list'],
-        ['allure-playwright']
-    ]
-};
-
-export default config;
+    reporter: process.env.CI
+        ? [['list'], ['allure-playwright'], ['github']]
+        : [['list'], ['allure-playwright']],
+    // Reuse Theia backend on port 3000 or start instance before executing the tests
+    webServer: {
+        command: 'yarn theia:start',
+        port: 3000,
+        reuseExistingServer: true
+    }
+});

examples/playwright/src/index.ts

@@ -25,6 +25,8 @@ export * from './theia-menu-item';
 export * from './theia-menu';
 export * from './theia-notification-indicator';
 export * from './theia-notification-overlay';
+export * from './theia-output-channel';
+export * from './theia-output-view';
 export * from './theia-page-object';
 export * from './theia-preference-view';
 export * from './theia-problem-indicator';
@@ -35,6 +37,8 @@ export * from './theia-status-bar';
 export * from './theia-status-indicator';
 export * from './theia-text-editor';
 export * from './theia-toggle-bottom-indicator';
+export * from './theia-toolbar';
+export * from './theia-toolbar-item';
 export * from './theia-tree-node';
 export * from './theia-view';
 export * from './theia-workspace';