@playwright/test 1.35.0-alpha-jun-6-2023 → 1.35.0-beta-1686166896000

package/lib/cli.js

@@ -126,7 +126,10 @@ async function runTests(args, opts) {
   config.cliPassWithNoTests = !!opts.passWithNoTests;
   const runner = new _runner.Runner(config);
   let status;
-  if (opts.ui) status = await runner.uiAllTests();else if (process.env.PWTEST_WATCH) status = await runner.watchAllTests();else status = await runner.runAllTests();
+  if (opts.ui || opts.uiHost || opts.uiPort) status = await runner.uiAllTests({
+    host: opts.uiHost,
+    port: opts.uiPort ? +opts.uiPort : undefined
+  });else if (process.env.PWTEST_WATCH) status = await runner.watchAllTests();else status = await runner.runAllTests();
   await (0, _utils.stopProfiling)('runner');
   if (status === 'interrupted') process.exit(130);
   process.exit(status === 'passed' ? 0 : 1);
@@ -262,7 +265,7 @@ function restartWithExperimentalTsEsm(configFile) {
   return true;
 }
 const kTraceModes = ['on', 'off', 'on-first-retry', 'on-all-retries', 'retain-on-failure'];
-const testOptions = [['--browser <browser>', `Browser to use for tests, one of "all", "chromium", "firefox" or "webkit" (default: "chromium")`], ['-c, --config <file>', `Configuration file, or a test directory with optional "playwright.config.{m,c}?{js,ts}"`], ['--debug', `Run tests with Playwright Inspector. Shortcut for "PWDEBUG=1" environment variable and "--timeout=0 --max-failures=1 --headed --workers=1" options`], ['--forbid-only', `Fail if test.only is called (default: false)`], ['--fully-parallel', `Run all tests in parallel (default: false)`], ['--global-timeout <timeout>', `Maximum time this test suite can run in milliseconds (default: unlimited)`], ['-g, --grep <grep>', `Only run tests matching this regular expression (default: ".*")`], ['-gv, --grep-invert <grep>', `Only run tests that do not match this regular expression`], ['--headed', `Run tests in headed browsers (default: headless)`], ['--ignore-snapshots', `Ignore screenshot and snapshot expectations`], ['--list', `Collect all the tests and report them, but do not run`], ['--max-failures <N>', `Stop after the first N failures`], ['--no-deps', 'Do not run project dependencies'], ['--output <dir>', `Folder for output artifacts (default: "test-results")`], ['--pass-with-no-tests', `Makes test run succeed even if no tests were found`], ['--project <project-name...>', `Only run tests from the specified list of projects (default: run all projects)`], ['--quiet', `Suppress stdio`], ['--repeat-each <N>', `Run each test N times (default: 1)`], ['--reporter <reporter>', `Reporter to use, comma-separated, can be ${_config.builtInReporters.map(name => `"${name}"`).join(', ')} (default: "${_config.defaultReporter}")`], ['--retries <retries>', `Maximum retry count for flaky tests, zero for no retries (default: no retries)`], ['--shard <shard>', `Shard tests and execute only the selected shard, specify in the form "current/all", 1-based, for example "3/5"`], ['--timeout <timeout>', `Specify test timeout threshold in milliseconds, zero for unlimited (default: ${_config.defaultTimeout})`], ['--trace <mode>', `Force tracing mode, can be ${kTraceModes.map(mode => `"${mode}"`).join(', ')}`], ['--ui', `Run tests in interactive UI mode`], ['-u, --update-snapshots', `Update snapshots with actual results (default: only create missing snapshots)`], ['-j, --workers <workers>', `Number of concurrent workers or percentage of logical CPU cores, use 1 to run in a single worker (default: 50%)`], ['-x', `Stop after the first failure`]];
+const testOptions = [['--browser <browser>', `Browser to use for tests, one of "all", "chromium", "firefox" or "webkit" (default: "chromium")`], ['-c, --config <file>', `Configuration file, or a test directory with optional "playwright.config.{m,c}?{js,ts}"`], ['--debug', `Run tests with Playwright Inspector. Shortcut for "PWDEBUG=1" environment variable and "--timeout=0 --max-failures=1 --headed --workers=1" options`], ['--forbid-only', `Fail if test.only is called (default: false)`], ['--fully-parallel', `Run all tests in parallel (default: false)`], ['--global-timeout <timeout>', `Maximum time this test suite can run in milliseconds (default: unlimited)`], ['-g, --grep <grep>', `Only run tests matching this regular expression (default: ".*")`], ['-gv, --grep-invert <grep>', `Only run tests that do not match this regular expression`], ['--headed', `Run tests in headed browsers (default: headless)`], ['--ignore-snapshots', `Ignore screenshot and snapshot expectations`], ['--list', `Collect all the tests and report them, but do not run`], ['--max-failures <N>', `Stop after the first N failures`], ['--no-deps', 'Do not run project dependencies'], ['--output <dir>', `Folder for output artifacts (default: "test-results")`], ['--pass-with-no-tests', `Makes test run succeed even if no tests were found`], ['--project <project-name...>', `Only run tests from the specified list of projects (default: run all projects)`], ['--quiet', `Suppress stdio`], ['--repeat-each <N>', `Run each test N times (default: 1)`], ['--reporter <reporter>', `Reporter to use, comma-separated, can be ${_config.builtInReporters.map(name => `"${name}"`).join(', ')} (default: "${_config.defaultReporter}")`], ['--retries <retries>', `Maximum retry count for flaky tests, zero for no retries (default: no retries)`], ['--shard <shard>', `Shard tests and execute only the selected shard, specify in the form "current/all", 1-based, for example "3/5"`], ['--timeout <timeout>', `Specify test timeout threshold in milliseconds, zero for unlimited (default: ${_config.defaultTimeout})`], ['--trace <mode>', `Force tracing mode, can be ${kTraceModes.map(mode => `"${mode}"`).join(', ')}`], ['--ui', `Run tests in interactive UI mode`], ['--ui-host <host>', 'Host to serve UI on; specifying this option opens UI in a browser tab'], ['--ui-port <port>', 'Port to serve UI on, 0 for any free port; specifying this option opens UI in a browser tab'], ['-u, --update-snapshots', `Update snapshots with actual results (default: only create missing snapshots)`], ['-j, --workers <workers>', `Number of concurrent workers or percentage of logical CPU cores, use 1 to run in a single worker (default: 50%)`], ['-x', `Stop after the first failure`]];
 addTestCommand(_program.default);
 addShowReportCommand(_program.default);
 addListFilesCommand(_program.default);

package/lib/matchers/toMatchSnapshot.js

@@ -288,6 +288,7 @@ async function toHaveScreenshot(pageOrLocator, nameOrOptions = {}, optOptions =
     caret: (_config$caret = config === null || config === void 0 ? void 0 : config.caret) !== null && _config$caret !== void 0 ? _config$caret : 'hide',
     ...helper.allOptions,
     mask: helper.allOptions.mask || [],
+    maskColor: helper.allOptions.maskColor,
     name: undefined,
     threshold: undefined,
     maxDiffPixels: undefined,

package/lib/reporters/html.js

@@ -36,7 +36,6 @@ class HtmlReporter {
   constructor(options) {
     this.config = void 0;
     this.suite = void 0;
-    this._montonicStartTime = 0;
     this._options = void 0;
     this._outputFolder = void 0;
     this._attachmentsBaseURL = void 0;
@@ -48,7 +47,6 @@ class HtmlReporter {
     return false;
   }
   onBegin(config, suite) {
-    this._montonicStartTime = (0, _utils.monotonicTime)();
     this.config = config;
     const {
       outputFolder,
@@ -88,7 +86,6 @@ class HtmlReporter {
     };
   }
   async onEnd() {
-    const duration = (0, _utils.monotonicTime)() - this._montonicStartTime;
     const projectSuites = this.suite.suites;
     const reports = projectSuites.map(suite => {
       const rawReporter = new _raw.default();
@@ -97,10 +94,7 @@ class HtmlReporter {
     });
     await (0, _utils.removeFolders)([this._outputFolder]);
     const builder = new HtmlBuilder(this._outputFolder, this._attachmentsBaseURL);
-    this._buildResult = await builder.build({
-      ...this.config.metadata,
-      duration
-    }, reports);
+    this._buildResult = await builder.build(this.config.metadata, reports);
   }
   async onExit() {
     if (process.env.CI || !this._buildResult) return;
@@ -154,7 +148,7 @@ async function showHTMLReport(reportFolder, host = 'localhost', port, testId) {
   if (testId) url += `#?testId=${testId}`;
   await (0, _utilsBundle.open)(url, {
     wait: true
-  }).catch(() => console.log(`Failed to open browser on ${url}`));
+  }).catch(() => {});
   await new Promise(() => {});
 }
 function startHtmlReportServer(folder) {
@@ -256,7 +250,7 @@ class HtmlBuilder {
       projectNames: rawReports.map(r => r.project.name),
       stats: {
         ...[...data.values()].reduce((a, e) => addStats(a, e.testFileSummary.stats), emptyStats()),
-        duration: metadata.duration
+        duration: metadata.totalTime
       }
     };
     htmlReport.files.sort((f1, f2) => {

package/lib/reporters/internalReporter.js

@@ -10,6 +10,7 @@ var _babelBundle = require("../transform/babelBundle");
 var _test = require("../common/test");
 var _multiplexer = require("./multiplexer");
 var _base = require("./base");
+var _utils = require("playwright-core/lib/utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Microsoft Corporation.
@@ -32,12 +33,14 @@ class InternalReporter {
     this._multiplexer = void 0;
     this._deferred = [];
     this._config = void 0;
+    this._montonicStartTime = 0;
     this._multiplexer = new _multiplexer.Multiplexer(reporters);
   }
   onConfigure(config) {
     this._config = config;
   }
   onBegin(config, suite) {
+    this._montonicStartTime = (0, _utils.monotonicTime)();
     this._multiplexer.onBegin(config, suite);
     const deferred = this._deferred;
     this._deferred = null;
@@ -80,7 +83,9 @@ class InternalReporter {
     this._addSnippetToTestErrors(test, result);
     this._multiplexer.onTestEnd(test, result);
   }
-  async onEnd() {}
+  async onEnd() {
+    this._config.config.metadata.totalTime = (0, _utils.monotonicTime)() - this._montonicStartTime;
+  }
   async onExit(result) {
     if (this._deferred) {
       // onBegin was not reported, emit it.

package/lib/reporters/merge.js

@@ -70,7 +70,9 @@ function mergeBeginEvents(beginEvents) {
     configFile: undefined,
     globalTimeout: 0,
     maxFailures: 0,
-    metadata: {},
+    metadata: {
+      totalTime: 0
+    },
     rootDir: '',
     version: '',
     workers: 0,
@@ -98,7 +100,8 @@ function mergeConfigs(to, from) {
     ...from,
     metadata: {
       ...to.metadata,
-      ...from.metadata
+      ...from.metadata,
+      totalTime: to.metadata.totalTime + from.metadata.totalTime
     },
     workers: to.workers + from.workers
   };

package/lib/runner/runner.js

@@ -93,12 +93,12 @@ class Runner {
     }));
     return await (0, _watchMode.runWatchModeLoop)(config);
   }
-  async uiAllTests() {
+  async uiAllTests(options) {
     const config = this._config;
     (0, _webServerPlugin.webServerPluginsForConfig)(config).forEach(p => config.plugins.push({
       factory: p
     }));
-    return await (0, _uiMode.runUIMode)(config);
+    return await (0, _uiMode.runUIMode)(config, options);
   }
 }
 exports.Runner = Runner;

package/lib/runner/uiMode.js

@@ -34,7 +34,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class UIMode {
   constructor(config) {
     this._config = void 0;
-    this._page = void 0;
+    this._transport = void 0;
     this._testRun = void 0;
     this.globalCleanup = void 0;
     this._globalWatcher = void 0;
@@ -60,17 +60,12 @@ class UIMode {
     };
     this._originalStdoutWrite = process.stdout.write;
     this._originalStderrWrite = process.stderr.write;
-    this._globalWatcher = new Watcher('deep', () => this._dispatchEvent({
-      method: 'listChanged'
-    }));
+    this._globalWatcher = new Watcher('deep', () => this._dispatchEvent('listChanged', {}));
     this._testWatcher = new Watcher('flat', events => {
       const collector = new Set();
       events.forEach(f => (0, _compilationCache.collectAffectedTestFiles)(f.file, collector));
-      this._dispatchEvent({
-        method: 'testFilesChanged',
-        params: {
-          testFileNames: [...collector]
-        }
+      this._dispatchEvent('testFilesChanged', {
+        testFileNames: [...collector]
       });
     });
   }
@@ -93,61 +88,58 @@ class UIMode {
     this.globalCleanup = globalCleanup;
     return status;
   }
-  async showUI() {
-    this._page = await (0, _server.openTraceViewerApp)([], 'chromium', {
+  async showUI(options) {
+    const exitPromise = new _utils.ManualPromise();
+    let queue = Promise.resolve();
+    this._transport = {
+      dispatch: async (method, params) => {
+        if (method === 'ping') return;
+        if (method === 'exit') {
+          exitPromise.resolve();
+          return;
+        }
+        if (method === 'watch') {
+          this._watchFiles(params.fileNames);
+          return;
+        }
+        if (method === 'open' && params.location) {
+          (0, _utilsBundle2.open)('vscode://file/' + params.location).catch(e => this._originalStderrWrite.call(process.stderr, String(e)));
+          return;
+        }
+        if (method === 'resizeTerminal') {
+          process.stdout.columns = params.cols;
+          process.stdout.rows = params.rows;
+          process.stderr.columns = params.cols;
+          process.stderr.columns = params.rows;
+          return;
+        }
+        if (method === 'stop') {
+          void this._stopTests();
+          return;
+        }
+        queue = queue.then(() => this._queueListOrRun(method, params));
+        await queue;
+      },
+      onclose: () => exitPromise.resolve()
+    };
+    await (0, _server.showTraceViewer)([], 'chromium', {
       app: 'uiMode.html',
-      headless: (0, _utils.isUnderTest)() && process.env.PWTEST_HEADED_FOR_TEST !== '1'
+      headless: (0, _utils.isUnderTest)() && process.env.PWTEST_HEADED_FOR_TEST !== '1',
+      transport: this._transport,
+      host: options.host,
+      port: options.port,
+      openInBrowser: options.host !== undefined || options.port !== undefined
     });
     if (!process.env.PWTEST_DEBUG) {
       process.stdout.write = chunk => {
-        this._dispatchEvent({
-          method: 'stdio',
-          params: chunkToPayload('stdout', chunk)
-        });
+        this._dispatchEvent('stdio', chunkToPayload('stdout', chunk));
         return true;
       };
       process.stderr.write = chunk => {
-        this._dispatchEvent({
-          method: 'stdio',
-          params: chunkToPayload('stderr', chunk)
-        });
+        this._dispatchEvent('stdio', chunkToPayload('stderr', chunk));
         return true;
       };
     }
-    const exitPromise = new _utils.ManualPromise();
-    this._page.on('close', () => exitPromise.resolve());
-    let queue = Promise.resolve();
-    await this._page.exposeBinding('sendMessage', false, async (source, data) => {
-      const {
-        method,
-        params
-      } = data;
-      if (method === 'exit') {
-        exitPromise.resolve();
-        return;
-      }
-      if (method === 'watch') {
-        this._watchFiles(params.fileNames);
-        return;
-      }
-      if (method === 'open' && params.location) {
-        (0, _utilsBundle2.open)('vscode://file/' + params.location).catch(e => this._originalStderrWrite.call(process.stderr, String(e)));
-        return;
-      }
-      if (method === 'resizeTerminal') {
-        process.stdout.columns = params.cols;
-        process.stdout.rows = params.rows;
-        process.stderr.columns = params.cols;
-        process.stderr.columns = params.rows;
-        return;
-      }
-      if (method === 'stop') {
-        void this._stopTests();
-        return;
-      }
-      queue = queue.then(() => this._queueListOrRun(method, params));
-      await queue;
-    });
     await exitPromise;
     if (!process.env.PWTEST_DEBUG) {
       process.stdout.write = this._originalStdoutWrite;
@@ -158,14 +150,12 @@ class UIMode {
     if (method === 'list') await this._listTests();
     if (method === 'run') await this._runTests(params.testIds);
   }
-  _dispatchEvent(message) {
-    // eslint-disable-next-line no-console
-    this._page.mainFrame().evaluateExpression(dispatchFuncSource, {
-      isFunction: true
-    }, message).catch(e => this._originalStderrWrite.call(process.stderr, String(e)));
+  _dispatchEvent(method, params) {
+    var _this$_transport$send, _this$_transport;
+    (_this$_transport$send = (_this$_transport = this._transport).sendEvent) === null || _this$_transport$send === void 0 ? void 0 : _this$_transport$send.call(_this$_transport, method, params);
   }
   async _listTests() {
-    const listReporter = new _teleEmitter.TeleReporterEmitter(e => this._dispatchEvent(e));
+    const listReporter = new _teleEmitter.TeleReporterEmitter(e => this._dispatchEvent(e.method, e.params));
     const reporter = new _internalReporter.InternalReporter([listReporter]);
     this._config.cliListOnly = true;
     this._config.testIdMatcher = undefined;
@@ -189,7 +179,7 @@ class UIMode {
     this._config.cliListOnly = false;
     this._config.testIdMatcher = id => !testIdSet || testIdSet.has(id);
     const reporters = await (0, _reporters.createReporters)(this._config, 'ui');
-    reporters.push(new _teleEmitter.TeleReporterEmitter(e => this._dispatchEvent(e)));
+    reporters.push(new _teleEmitter.TeleReporterEmitter(e => this._dispatchEvent(e.method, e.params)));
     const reporter = new _internalReporter.InternalReporter(reporters);
     const taskRunner = (0, _tasks.createTaskRunnerForWatch)(this._config, reporter);
     const testRun = new _tasks.TestRun(this._config, reporter);
@@ -224,15 +214,12 @@ class UIMode {
     await ((_this$_testRun2 = this._testRun) === null || _this$_testRun2 === void 0 ? void 0 : _this$_testRun2.run);
   }
 }
-const dispatchFuncSource = String(message => {
-  window.dispatch(message);
-});
-async function runUIMode(config) {
+async function runUIMode(config, options) {
   var _uiMode$globalCleanup;
   const uiMode = new UIMode(config);
   const status = await uiMode.runGlobalSetup();
   if (status !== 'passed') return status;
-  await uiMode.showUI();
+  await uiMode.showUI(options);
   return (await ((_uiMode$globalCleanup = uiMode.globalCleanup) === null || _uiMode$globalCleanup === void 0 ? void 0 : _uiMode$globalCleanup.call(uiMode))) || 'passed';
 }
 function chunkToPayload(type, chunk) {

package/lib/worker/testInfo.js

@@ -175,7 +175,7 @@ class TestInfoImpl {
   }
   _addStep(data, parentStep) {
     var _parentStep;
-    const stepId = `${data.category}@${data.title}@${++this._lastStepId}`;
+    const stepId = `${data.category}@${++this._lastStepId}`;
     if (!parentStep) parentStep = _utils.zones.zoneData('stepZone', (0, _utils.captureRawStack)()) || undefined;
 
     // For out-of-stack calls, locate the enclosing step.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/test",
-  "version": "1.35.0-alpha-jun-6-2023",
+  "version": "1.35.0-beta-1686166896000",
   "description": "A high-level API to automate web browsers",
   "repository": "github:Microsoft/playwright",
   "homepage": "https://playwright.dev",
@@ -41,7 +41,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@types/node": "*",
-    "playwright-core": "1.35.0-alpha-jun-6-2023"
+    "playwright-core": "1.35.0-beta-1686166896000"
   },
   "optionalDependencies": {
     "fsevents": "2.3.2"

package/types/test.d.ts

@@ -570,7 +570,7 @@ interface TestConfig {
    */
   webServer?: TestConfigWebServer | TestConfigWebServer[];
   /**
-   * Transpiler configuration.
+   * Playwright transpiler configuration.
    *
    * **Usage**
    *
@@ -580,7 +580,7 @@ interface TestConfig {
    *
    * export default defineConfig({
    *   build: {
-   *     external: '**\/*bundle.js',
+   *     external: ['**\/*bundle.js'],
    *   },
    * });
    * ```
@@ -588,8 +588,8 @@ interface TestConfig {
    */
   build?: {
     /**
-     * Paths to exclude from the transpilation expressed as glob patterns. Typically heavy JS bundles your tests
-     * reference.
+     * Paths to exclude from the transpilation expressed as a list of glob patterns. Typically heavy JS bundles that your
+     * test uses are listed here.
      */
     external?: Array<string>;
   };
@@ -5337,10 +5337,16 @@ interface LocatorAssertions {
 
     /**
      * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink
-     * box `#FF00FF` that completely covers its bounding box.
+     * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box.
      */
     mask?: Array<Locator>;
 
+    /**
+     * Specify the color of the overlay box for masked elements, in
+     * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`.
+     */
+    maskColor?: string;
+
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is
      * configurable with `TestConfig.expect`. Unset by default.
@@ -5414,10 +5420,16 @@ interface LocatorAssertions {
 
     /**
      * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink
-     * box `#FF00FF` that completely covers its bounding box.
+     * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box.
      */
     mask?: Array<Locator>;
 
+    /**
+     * Specify the color of the overlay box for masked elements, in
+     * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`.
+     */
+    maskColor?: string;
+
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is
      * configurable with `TestConfig.expect`. Unset by default.
@@ -5667,10 +5679,16 @@ interface PageAssertions {
 
     /**
      * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink
-     * box `#FF00FF` that completely covers its bounding box.
+     * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box.
      */
     mask?: Array<Locator>;
 
+    /**
+     * Specify the color of the overlay box for masked elements, in
+     * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`.
+     */
+    maskColor?: string;
+
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is
      * configurable with `TestConfig.expect`. Unset by default.
@@ -5774,10 +5792,16 @@ interface PageAssertions {
 
     /**
      * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink
-     * box `#FF00FF` that completely covers its bounding box.
+     * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box.
      */
     mask?: Array<Locator>;
 
+    /**
+     * Specify the color of the overlay box for masked elements, in
+     * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`.
+     */
+    maskColor?: string;
+
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is
      * configurable with `TestConfig.expect`. Unset by default.