@serenity-js/web 3.41.2 → 3.42.0

package/src/screenplay/interactions/RightClick.ts

@@ -1,94 +1,94 @@
-import type { Answerable, AnswersQuestions, Interaction, UsesAbilities } from '@serenity-js/core';
-import { the } from '@serenity-js/core';
-
-import type { PageElement } from '../models';
-import { PageElementInteraction } from './PageElementInteraction';
-
-/**
- * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
- * to perform a right click on a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
- *
- * This is typically used to open a [custom context menu](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
- * on a given Web element, since it's not possible to interact with the standard context menu offered by your browser.
- *
- * ## Example widget
- *
- * ```html
- * <form>
- *   <input type="text" id="field"
- *     oncontextmenu="showMenu(); return false;" />
- *
- *   <div id="context-menu" style="display:none">
- *     Custom context menu
- *   </div>
- * </form>
- *
- * <script>
- *   function showMenu() {
- *     document.getElementById("context-menu").style.display = 'block';
- *   }
- * </script>
- * ```
- *
- * ## Lean Page Object describing the widget
- *
- * ```ts
- * import { By, PageElement } from '@serenity-js/web'
- *
- * class Form {
- *   static exampleInput = () =>
- *     PageElement.located(By.id('example'))
- *       .describedAs('example input')
- *
- *   static exampleContextMenu = () =>
- *     PageElement.located(By.id('context-menu'))
- *       .describedAs('example context menu')
- * }
- * ```
- *
- * ## Right-click on an element
- *
- * ```ts
- * import { actorCalled } from '@serenity-js/core'
- * import { RightClick, isVisible } from '@serenity-js/web'
- * import { Ensure } from '@serenity-js/assertions'
- *
- * await actorCalled('Chloé')
- *   .whoCan(BrowseTheWeb.using(browser))
- *   .attemptsTo(
- *     RightClick.on(Form.exampleInput()),
- *     Ensure.that(Form.exampleContextMenu(), isVisible()),
- *   )
- * ```
- *
- * ## Learn more
- *
- * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
- * - [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
- *
- * @group Activities
- */
-export class RightClick extends PageElementInteraction {
-    /**
-     * Instantiates this [`Interaction`](https://serenity-js.org/api/core/class/Interaction/).
-     *
-     * @param pageElement
-     *  The element to be right-clicked on
-     */
-    static on(pageElement: Answerable<PageElement>): Interaction {
-        return new RightClick(pageElement);
-    }
-
-    protected constructor(private readonly pageElement: Answerable<PageElement>) {
-        super(the `#actor right-clicks on ${ pageElement }`);
-    }
-
-    /**
-     * @inheritDoc
-     */
-    async performAs(actor: UsesAbilities & AnswersQuestions): Promise<void> {
-        const element = await this.resolve(actor, this.pageElement);
-        await element.scrollIntoView();
-        await element.rightClick();
-    }
-}
+import type { Answerable, AnswersQuestions, Interaction, UsesAbilities } from '@serenity-js/core';
+import { the } from '@serenity-js/core';
+
+import type { PageElement } from '../models/index.js';
+import { PageElementInteraction } from './PageElementInteraction.js';
+
+/**
+ * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * to perform a right click on a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * This is typically used to open a [custom context menu](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
+ * on a given Web element, since it's not possible to interact with the standard context menu offered by your browser.
+ *
+ * ## Example widget
+ *
+ * ```html
+ * <form>
+ *   <input type="text" id="field"
+ *     oncontextmenu="showMenu(); return false;" />
+ *
+ *   <div id="context-menu" style="display:none">
+ *     Custom context menu
+ *   </div>
+ * </form>
+ *
+ * <script>
+ *   function showMenu() {
+ *     document.getElementById("context-menu").style.display = 'block';
+ *   }
+ * </script>
+ * ```
+ *
+ * ## Lean Page Object describing the widget
+ *
+ * ```ts
+ * import { By, PageElement } from '@serenity-js/web'
+ *
+ * class Form {
+ *   static exampleInput = () =>
+ *     PageElement.located(By.id('example'))
+ *       .describedAs('example input')
+ *
+ *   static exampleContextMenu = () =>
+ *     PageElement.located(By.id('context-menu'))
+ *       .describedAs('example context menu')
+ * }
+ * ```
+ *
+ * ## Right-click on an element
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { RightClick, isVisible } from '@serenity-js/web'
+ * import { Ensure } from '@serenity-js/assertions'
+ *
+ * await actorCalled('Chloé')
+ *   .whoCan(BrowseTheWeb.using(browser))
+ *   .attemptsTo(
+ *     RightClick.on(Form.exampleInput()),
+ *     Ensure.that(Form.exampleContextMenu(), isVisible()),
+ *   )
+ * ```
+ *
+ * ## Learn more
+ *
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
+ *
+ * @group Activities
+ */
+export class RightClick extends PageElementInteraction {
+    /**
+     * Instantiates this [`Interaction`](https://serenity-js.org/api/core/class/Interaction/).
+     *
+     * @param pageElement
+     *  The element to be right-clicked on
+     */
+    static on(pageElement: Answerable<PageElement>): Interaction {
+        return new RightClick(pageElement);
+    }
+
+    protected constructor(private readonly pageElement: Answerable<PageElement>) {
+        super(the `#actor right-clicks on ${ pageElement }`);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    async performAs(actor: UsesAbilities & AnswersQuestions): Promise<void> {
+        const element = await this.resolve(actor, this.pageElement);
+        await element.scrollIntoView();
+        await element.rightClick();
+    }
+}

package/src/screenplay/interactions/Scroll.ts

@@ -1,7 +1,7 @@
 import type { Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
 import { Interaction, the } from '@serenity-js/core';
 
-import type { PageElement } from '../models';
+import type { PageElement } from '../models/index.js';
 
 /**
  * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)

package/src/screenplay/interactions/Select.ts

@@ -1,9 +1,8 @@
 import { type Answerable, Interaction,the } from '@serenity-js/core';
-import { asyncMap, commaSeparated } from '@serenity-js/core/lib/io';
-import { stringified } from '@serenity-js/core/lib/io/stringified';
+import { asyncMap, commaSeparated, stringified } from '@serenity-js/core/io';
 
-import type { PageElement } from '../models';
-import { SelectOption } from '../models';
+import type { PageElement } from '../models/index.js';
+import { SelectOption } from '../models/index.js';
 
 /**
  * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)

package/src/screenplay/interactions/Switch.ts

@@ -1,7 +1,7 @@
 import type { Activity, Actor, Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
 import { Interaction, Task, the } from '@serenity-js/core';
 
-import type { Switchable } from '../models';
+import type { Switchable } from '../models/index.js';
 
 /**
  * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/) who has the [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)

package/src/screenplay/interactions/TakeScreenshot.ts

@@ -1,8 +1,8 @@
 import type { Answerable, AnswersQuestions, CollectsArtifacts, UsesAbilities } from '@serenity-js/core';
 import { Interaction, the } from '@serenity-js/core';
-import { Name, Photo } from '@serenity-js/core/lib/model';
+import { Name, Photo } from '@serenity-js/core/model';
 
-import { BrowseTheWeb } from '../abilities';
+import { BrowseTheWeb } from '../abilities/index.js';
 
 /**
  * Instructs an [actor](https://serenity-js.org/api/core/class/Actor/)

package/src/screenplay/interactions/index.ts

@@ -1,15 +1,15 @@
-export * from './Clear';
-export * from './Click';
-export * from './DoubleClick';
-export * from './Drag';
-export * from './Enter';
-export * from './ExecuteScript';
-export * from './Hover';
-export * from './Navigate';
-export * from './PageElementInteraction';
-export * from './Press';
-export * from './RightClick';
-export * from './Scroll';
-export * from './Select';
-export * from './Switch';
-export * from './TakeScreenshot';
+export * from './Clear.js';
+export * from './Click.js';
+export * from './DoubleClick.js';
+export * from './Drag.js';
+export * from './Enter.js';
+export * from './ExecuteScript.js';
+export * from './Hover.js';
+export * from './Navigate.js';
+export * from './PageElementInteraction.js';
+export * from './Press.js';
+export * from './RightClick.js';
+export * from './Scroll.js';
+export * from './Select.js';
+export * from './Switch.js';
+export * from './TakeScreenshot.js';

package/src/screenplay/models/ArgumentDehydrator.ts

@@ -1,4 +1,4 @@
-import { ValueInspector } from '@serenity-js/core/lib/io';
+import { ValueInspector } from '@serenity-js/core/io';
 
 /* eslint-disable @stylistic/indent */
 type TransformedArgument<T, U> =

package/src/screenplay/models/BrowsingSession.ts

@@ -1,7 +1,7 @@
-import type { CorrelationId } from '@serenity-js/core/lib/model';
+import type { CorrelationId } from '@serenity-js/core/model';
 
-import type { BrowserCapabilities } from './BrowserCapabilities';
-import type { Page } from './Page';
+import type { BrowserCapabilities } from './BrowserCapabilities.js';
+import type { Page } from './Page.js';
 
 /**
  * Represents the pages open in the current browsing context.

package/src/screenplay/models/Cookie.ts

@@ -3,9 +3,9 @@ import { Interaction, Question, the, Timestamp } from '@serenity-js/core';
 import type { Predicate } from 'tiny-types';
 import { ensure, isBoolean, isDefined, isInstanceOf, isOneOf, isPlainObject, isString } from 'tiny-types';
 
-import { CookieMissingError } from '../../errors';
-import { BrowseTheWeb } from '../abilities';
-import type { CookieData } from './CookieData';
+import { CookieMissingError } from '../../errors/index.js';
+import { BrowseTheWeb } from '../abilities/index.js';
+import type { CookieData } from './CookieData.js';
 
 /**
  * A Screenplay Pattern-style model responsible for managing cookies available to the current [`Page`](https://serenity-js.org/api/web/class/Page/).

package/src/screenplay/models/Key.ts

@@ -15,6 +15,19 @@
  * @group Models
  */
 export class Key {
+
+    /**
+     * Custom `instanceof` check that works across module boundaries (ESM/CJS dual-package hazard).
+     * Uses a Symbol-based brand check instead of relying on prototype chain.
+     */
+    static [Symbol.hasInstance](instance: unknown): instance is Key {
+        return !! instance
+            && typeof instance === 'object'
+            && 'devtoolsName' in instance
+            && 'utf16codePoint' in instance
+            && typeof (instance as Key).devtoolsName === 'string'
+            && typeof (instance as Key).utf16codePoint === 'string';
+    }
     public static Alt = new Key('Alt', '\uE00A', true);
     public static ArrowDown = new Key('ArrowDown', '\uE015');
     public static ArrowLeft = new Key('ArrowLeft', '\uE012');
@@ -69,8 +82,7 @@ export class Key {
     public static Tab = new Key('Tab', '\uE004');
 
     public static isKey(maybeKey: unknown): maybeKey is Key {
-        return !! maybeKey
-            && maybeKey instanceof Key;
+        return maybeKey instanceof Key;
     }
 
     constructor(

package/src/screenplay/models/Locator.ts

@@ -1,11 +1,11 @@
 import util from 'node:util';
 
 import { LogicError } from '@serenity-js/core';
-import { inspectedObject } from '@serenity-js/core/lib/io';
+import { inspectedObject } from '@serenity-js/core/io';
 
-import type { PageElement } from './PageElement';
-import { RootLocator } from './RootLocator';
-import { ByCss, ById, ByTagName, type Selector } from './selectors';
+import type { PageElement } from './PageElement.js';
+import { RootLocator } from './RootLocator.js';
+import { ByCss, ById, ByTagName, type Selector } from './selectors/index.js';
 
 /**
  * [`Locator`](https://serenity-js.org/api/web/class/Locator/) uses a [`Selector`](https://serenity-js.org/api/web/class/Selector/) to locate a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) or [`PageElement`](https://serenity-js.org/api/web/class/PageElements/)

package/src/screenplay/models/Page.ts

@@ -2,21 +2,21 @@ import type { URL } from 'node:url';
 
 import type { Expectation, ExpectationOutcome, Optional, QuestionAdapter } from '@serenity-js/core';
 import { ExpectationMet, LogicError, Question } from '@serenity-js/core';
-import type { CorrelationId } from '@serenity-js/core/lib/model';
+import type { CorrelationId } from '@serenity-js/core/model';
 import { ensure, isDefined } from 'tiny-types';
 
-import { BrowseTheWeb } from '../abilities';
-import type { BrowsingSession } from './BrowsingSession';
-import type { Cookie } from './Cookie';
-import type { CookieData } from './CookieData';
-import type { ModalDialogHandler } from './dialogs';
-import type { Key } from './Key';
-import type { PageElement } from './PageElement';
-import type { PageElements } from './PageElements';
-import type { RootLocator } from './RootLocator';
-import type { Selector } from './selectors';
-import type { Switchable } from './Switchable';
-import type { SwitchableOrigin } from './SwitchableOrigin';
+import { BrowseTheWeb } from '../abilities/index.js';
+import type { BrowsingSession } from './BrowsingSession.js';
+import type { Cookie } from './Cookie.js';
+import type { CookieData } from './CookieData.js';
+import type { ModalDialogHandler } from './dialogs/index.js';
+import type { Key } from './Key.js';
+import type { PageElement } from './PageElement.js';
+import type { PageElements } from './PageElements.js';
+import type { RootLocator } from './RootLocator.js';
+import type { Selector } from './selectors/index.js';
+import type { Switchable } from './Switchable.js';
+import type { SwitchableOrigin } from './SwitchableOrigin.js';
 
 /**
  * Serenity/JS Screenplay Pattern-style model that enables interactions with a Web page

package/src/screenplay/models/PageElement.ts

@@ -2,12 +2,12 @@ import type { Answerable, MetaQuestion, MetaQuestionAdapter, Optional , Question
 import { Question, the } from '@serenity-js/core';
 import { ensure, isDefined } from 'tiny-types';
 
-import { BrowseTheWeb } from '../abilities';
-import type { Locator } from './Locator';
-import type { SelectOption } from './SelectOption';
-import type { Selector } from './selectors';
-import type { Switchable } from './Switchable';
-import type { SwitchableOrigin } from './SwitchableOrigin';
+import { BrowseTheWeb } from '../abilities/index.js';
+import type { Locator } from './Locator.js';
+import type { SelectOption } from './SelectOption.js';
+import type { Selector } from './selectors/index.js';
+import type { Switchable } from './Switchable.js';
+import type { SwitchableOrigin } from './SwitchableOrigin.js';
 
 /**
  * Uses the [actor's](https://serenity-js.org/api/core/class/Actor/) [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/) to identify

package/src/screenplay/models/PageElements.ts

@@ -1,9 +1,9 @@
 import type { Answerable } from '@serenity-js/core';
 import { MetaList } from '@serenity-js/core';
 
-import type { PageElement } from './PageElement';
-import { PageElementsLocator } from './PageElementsLocator';
-import type { Selector } from './selectors';
+import type { PageElement } from './PageElement.js';
+import { PageElementsLocator } from './PageElementsLocator.js';
+import type { Selector } from './selectors/index.js';
 
 /**
  * Uses the [actor's](https://serenity-js.org/api/core/class/Actor/) [ability](https://serenity-js.org/api/core/class/Ability/) to [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/) to identify

package/src/screenplay/models/PageElementsLocator.ts

@@ -1,10 +1,10 @@
 import type { Answerable, AnswersQuestions, ChainableMetaQuestion, UsesAbilities } from '@serenity-js/core';
 import { Question, the } from '@serenity-js/core';
 
-import { BrowseTheWeb } from '../abilities';
-import type { Locator } from './Locator';
-import type { PageElement } from './PageElement';
-import type { Selector } from './selectors';
+import { BrowseTheWeb } from '../abilities/index.js';
+import type { Locator } from './Locator.js';
+import type { PageElement } from './PageElement.js';
+import type { Selector } from './selectors/index.js';
 
 /**
  * @group Models

package/src/screenplay/models/RootLocator.ts

@@ -1,7 +1,7 @@
 import util from 'node:util';
 
 import type { Optional } from '@serenity-js/core';
-import { inspectedObject } from '@serenity-js/core/lib/io';
+import { inspectedObject } from '@serenity-js/core/io';
 
 /**
  * [`RootLocator`](https://serenity-js.org/api/web/class/RootLocator/) represents the context in which [`Locator`](https://serenity-js.org/api/web/class/Locator/) looks for [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) or [`PageElement`](https://serenity-js.org/api/web/class/PageElements/).

package/src/screenplay/models/Switchable.ts

@@ -1,4 +1,4 @@
-import type { SwitchableOrigin } from './SwitchableOrigin';
+import type { SwitchableOrigin } from './SwitchableOrigin.js';
 
 /**
  * Describes a Serenity/JS model object that can be switched _to_ and switched back _from_

package/src/screenplay/models/dialogs/AbsentModalDialog.ts

@@ -1,6 +1,6 @@
 import { LogicError } from '@serenity-js/core';
 
-import { ModalDialog } from './ModalDialog';
+import { ModalDialog } from './ModalDialog.js';
 
 /**
  * `AbsentModalDialog` is a [null object](https://en.wikipedia.org/wiki/Null_object_pattern)

package/src/screenplay/models/dialogs/AcceptedModalDialog.ts

@@ -1,6 +1,6 @@
 import { ensure, isDefined } from 'tiny-types';
 
-import { ModalDialog } from './ModalDialog';
+import { ModalDialog } from './ModalDialog.js';
 
 /**
  * `AcceptedModalDialog` represents a [`ModalDialog`](https://serenity-js.org/api/web/class/ModalDialog/) that has been accepted

package/src/screenplay/models/dialogs/DismissedModalDialog.ts

@@ -1,6 +1,6 @@
 import { ensure, isDefined } from 'tiny-types';
 
-import { ModalDialog } from './ModalDialog';
+import { ModalDialog } from './ModalDialog.js';
 
 /**
  * `DismissedModalDialog` represents a [`ModalDialog`](https://serenity-js.org/api/web/class/ModalDialog/) that has been dismissed

package/src/screenplay/models/dialogs/ModalDialog.ts

@@ -1,7 +1,7 @@
 import type { Answerable, Interaction, Optional, Question, QuestionAdapter } from '@serenity-js/core';
 import { the } from '@serenity-js/core';
 
-import { Page } from '../Page';
+import { Page } from '../Page.js';
 
 /**
  * Manages interactions with JavaScript modal dialog windows,

package/src/screenplay/models/dialogs/ModalDialogHandler.ts

@@ -1,7 +1,7 @@
 import { ensure, isDefined } from 'tiny-types';
 
-import { AbsentModalDialog } from './AbsentModalDialog';
-import type { ModalDialog } from './ModalDialog';
+import { AbsentModalDialog } from './AbsentModalDialog.js';
+import type { ModalDialog } from './ModalDialog.js';
 
 /**
  * Represent the strategy to use with any upcoming [`ModalDialog`](https://serenity-js.org/api/web/class/ModalDialog/) windows.

package/src/screenplay/models/dialogs/index.ts

@@ -1,5 +1,5 @@
-export * from './AbsentModalDialog';
-export * from './AcceptedModalDialog';
-export * from './DismissedModalDialog';
-export * from './ModalDialog';
-export * from './ModalDialogHandler';
+export * from './AbsentModalDialog.js';
+export * from './AcceptedModalDialog.js';
+export * from './DismissedModalDialog.js';
+export * from './ModalDialog.js';
+export * from './ModalDialogHandler.js';

package/src/screenplay/models/index.ts

@@ -1,17 +1,17 @@
-export * from './ArgumentDehydrator';
-export * from './BrowserCapabilities';
-export * from './BrowsingSession';
-export * from './Cookie';
-export * from './CookieData';
-export * from './dialogs';
-export * from './Key';
-export * from './Locator';
-export * from './Page';
-export * from './PageElement';
-export * from './PageElements';
-export * from './PageElementsLocator';
-export * from './RootLocator';
-export * from './SelectOption';
-export * from './selectors';
-export * from './Switchable';
-export * from './SwitchableOrigin';
+export * from './ArgumentDehydrator.js';
+export * from './BrowserCapabilities.js';
+export * from './BrowsingSession.js';
+export * from './Cookie.js';
+export * from './CookieData.js';
+export * from './dialogs/index.js';
+export * from './Key.js';
+export * from './Locator.js';
+export * from './Page.js';
+export * from './PageElement.js';
+export * from './PageElements.js';
+export * from './PageElementsLocator.js';
+export * from './RootLocator.js';
+export * from './SelectOption.js';
+export * from './selectors/index.js';
+export * from './Switchable.js';
+export * from './SwitchableOrigin.js';

package/src/screenplay/models/selectors/By.ts

@@ -1,14 +1,14 @@
 import type { Answerable, WithAnswerableProperties } from '@serenity-js/core';
 import { f, Question, the } from '@serenity-js/core';
 
-import { ByCss } from './ByCss';
-import { ByCssContainingText } from './ByCssContainingText';
-import { ByDeepCss } from './ByDeepCss';
-import { ById } from './ById';
-import type { ByRoleSelectorOptions, ByRoleSelectorValue } from './ByRole';
-import { ByRole } from './ByRole';
-import { ByTagName } from './ByTagName';
-import { ByXPath } from './ByXPath';
+import { ByCss } from './ByCss.js';
+import { ByCssContainingText } from './ByCssContainingText.js';
+import { ByDeepCss } from './ByDeepCss.js';
+import { ById } from './ById.js';
+import type { ByRoleSelectorOptions, ByRoleSelectorValue } from './ByRole.js';
+import { ByRole } from './ByRole.js';
+import { ByTagName } from './ByTagName.js';
+import { ByXPath } from './ByXPath.js';
 
 /**
  * `By` produces a [`Selector`](https://serenity-js.org/api/web/class/Selector/) used to locate a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) or [`PageElement`](https://serenity-js.org/api/web/class/PageElements/) on a web page.

package/src/screenplay/models/selectors/ByCss.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) using a [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors).

package/src/screenplay/models/selectors/ByCssContainingText.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) with a given [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)

package/src/screenplay/models/selectors/ByDeepCss.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) using a [CSS selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)

package/src/screenplay/models/selectors/ById.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) using its [id](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors).

package/src/screenplay/models/selectors/ByRole.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * @group Models

package/src/screenplay/models/selectors/ByTagName.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) using the name of its [HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

package/src/screenplay/models/selectors/ByXPath.ts

@@ -1,4 +1,4 @@
-import { Selector } from './Selector';
+import { Selector } from './Selector.js';
 
 /**
  * Locates a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) using an [XPath selector](https://developer.mozilla.org/en-US/docs/Web/XPath).