@serenity-js/web 3.41.2 → 3.42.0

package/esm/screenplay/models/selectors/Selector.js

@@ -0,0 +1,15 @@
+import { f } from '@serenity-js/core';
+import { TinyType } from 'tiny-types';
+/**
+ * Describes a selector you use to identify a [`PageElement`](https://serenity-js.org/api/web/class/PageElement/) or a group of [`PageElement`](https://serenity-js.org/api/web/class/PageElements/).
+ *
+ * @group Models
+ */
+export class Selector extends TinyType {
+    toString() {
+        const selectorDescription = this.constructor.name.replaceAll(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+        const parametersDescription = Object.keys(this).map(field => f `${this[field]}`).join(', ');
+        return `${selectorDescription} (${parametersDescription})`;
+    }
+}
+//# sourceMappingURL=Selector.js.map

package/esm/screenplay/models/selectors/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../../src/screenplay/models/selectors/Selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC;;;;GAIG;AACH,MAAM,OAAgB,QAAS,SAAQ,QAAQ;IAE3C,QAAQ;QACJ,MAAM,mBAAmB,GAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;QACzG,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3F,OAAO,GAAI,mBAAoB,KAAM,qBAAsB,GAAG,CAAC;IACnE,CAAC;CACJ"}

package/esm/screenplay/models/selectors/index.d.ts

@@ -0,0 +1,10 @@
+export * from './By.js';
+export * from './ByCss.js';
+export * from './ByCssContainingText.js';
+export * from './ByDeepCss.js';
+export * from './ById.js';
+export * from './ByRole.js';
+export * from './ByTagName.js';
+export * from './ByXPath.js';
+export * from './Selector.js';
+//# sourceMappingURL=index.d.ts.map

package/esm/screenplay/models/selectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/screenplay/models/selectors/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/esm/screenplay/models/selectors/index.js

@@ -0,0 +1,10 @@
+export * from './By.js';
+export * from './ByCss.js';
+export * from './ByCssContainingText.js';
+export * from './ByDeepCss.js';
+export * from './ById.js';
+export * from './ByRole.js';
+export * from './ByTagName.js';
+export * from './ByXPath.js';
+export * from './Selector.js';
+//# sourceMappingURL=index.js.map

package/esm/screenplay/models/selectors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/screenplay/models/selectors/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/esm/screenplay/questions/Attribute.d.ts

@@ -0,0 +1,127 @@
+import type { Answerable, AnswersQuestions, MetaQuestion, MetaQuestionAdapter, Optional, QuestionAdapter, UsesAbilities } from '@serenity-js/core';
+import { Question } from '@serenity-js/core';
+import { PageElement } from '../models/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 retrieve
+ * the value of the specified HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example widget
+ *
+ * ```html
+ * <ul id="shopping-list" data-items-left="2">
+ *   <li data-state="bought">Coffee<li>
+ *   <li data-state="buy">Honey<li>
+ *   <li data-state="buy">Chocolate<li>
+ * </ul>
+ * ```
+ *
+ * ## Retrieve an HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.id('shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa')
+ *   .attemptsTo(
+ *     Ensure.that(
+ *       Attribute.called('data-items-left').of(shoppingList()),
+ *       equals('2')
+ *     ),
+ *   )
+ * ```
+ *
+ * ## Using `Attribute` as [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.css('#shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa')
+ *   .attemptsTo(
+ *     Ensure.that(
+ *       Attribute.called('id').of(shoppingList()).toLocaleUpperCase(),
+ *       equals('SHOPPING-LIST')
+ *     ),
+ * )
+ * ```
+ *
+ * ## Using as filter in [Page Element Query Language](https://serenity-js.org/handbook/web-testing/page-element-query-language/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, includes } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElements } from '@serenity-js/web'
+ *
+ * class ShoppingList {
+ *   static items = () =>
+ *     PageElements.located(By.css('#shopping-list li'))
+ *       .describedAs('items')
+ *
+ *   static outstandingItems = () =>
+ *     ShoppingList.items()
+ *       .where(
+ *         Attribute.called('data-state'),
+ *         includes('buy')
+ *       )
+ * }
+ *
+ * await actorCalled('Lisa')
+ * .whoCan(BrowseTheWebWithWebdriverIO.using(browser))
+ * .attemptsTo(
+ *   Ensure.that(
+ *     Text.ofAll(ShoppingList.outstandingItems()),
+ *     equals([ 'Honey', 'Chocolate' ])
+ *   ),
+ * )
+ * ```
+ *
+ * ## Learn more
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+ * - [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ * - [`Question`](https://serenity-js.org/api/core/class/Question/)
+ *
+ * @group Questions
+ */
+export declare class Attribute<Native_Element_Type> extends Question<Promise<string>> implements MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>>, Optional {
+    private readonly name;
+    private readonly element?;
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param name
+     *  The name of the attribute to retrieve
+     */
+    static called<NET = any>(name: Answerable<string>): Attribute<NET>;
+    protected constructor(name: Answerable<string>, element?: QuestionAdapter<PageElement> | PageElement);
+    /**
+     * Resolves to the value of an HTML attribute of the `pageElement`.
+     *
+     * #### Learn more
+     * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+     *
+     * @param pageElement
+     */
+    of(pageElement: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string>;
+    /**
+     * @inheritDoc
+     */
+    answeredBy(actor: AnswersQuestions & UsesAbilities): Promise<string>;
+    /**
+     * @inheritDoc
+     */
+    isPresent(): QuestionAdapter<boolean>;
+}
+//# sourceMappingURL=Attribute.d.ts.map

package/esm/screenplay/questions/Attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribute.d.ts","sourceRoot":"","sources":["../../../src/screenplay/questions/Attribute.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACnJ,OAAO,EAAiB,QAAQ,EAAO,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,qBAAa,SAAS,CAAC,mBAAmB,CACtC,SAAQ,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAChC,YAAW,YAAY,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ;IAe1F,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC;IAd7B;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC;IAIlE,SAAS,aACY,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,EACxB,OAAO,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,GAAG,WAAW;IAQzE;;;;;;;OAOG;IACH,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,GAAG,WAAW,CAAC,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAWpK;;OAEG;IACG,UAAU,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAY1E;;OAEG;IACH,SAAS,IAAI,eAAe,CAAC,OAAO,CAAC;CAMxC"}

package/esm/screenplay/questions/Attribute.js

@@ -0,0 +1,150 @@
+import { d, LogicError, Question, the } from '@serenity-js/core';
+import { PageElement } from '../models/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 retrieve
+ * the value of the specified HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example widget
+ *
+ * ```html
+ * <ul id="shopping-list" data-items-left="2">
+ *   <li data-state="bought">Coffee<li>
+ *   <li data-state="buy">Honey<li>
+ *   <li data-state="buy">Chocolate<li>
+ * </ul>
+ * ```
+ *
+ * ## Retrieve an HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.id('shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa')
+ *   .attemptsTo(
+ *     Ensure.that(
+ *       Attribute.called('data-items-left').of(shoppingList()),
+ *       equals('2')
+ *     ),
+ *   )
+ * ```
+ *
+ * ## Using `Attribute` as [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.css('#shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa')
+ *   .attemptsTo(
+ *     Ensure.that(
+ *       Attribute.called('id').of(shoppingList()).toLocaleUpperCase(),
+ *       equals('SHOPPING-LIST')
+ *     ),
+ * )
+ * ```
+ *
+ * ## Using as filter in [Page Element Query Language](https://serenity-js.org/handbook/web-testing/page-element-query-language/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, includes } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElements } from '@serenity-js/web'
+ *
+ * class ShoppingList {
+ *   static items = () =>
+ *     PageElements.located(By.css('#shopping-list li'))
+ *       .describedAs('items')
+ *
+ *   static outstandingItems = () =>
+ *     ShoppingList.items()
+ *       .where(
+ *         Attribute.called('data-state'),
+ *         includes('buy')
+ *       )
+ * }
+ *
+ * await actorCalled('Lisa')
+ * .whoCan(BrowseTheWebWithWebdriverIO.using(browser))
+ * .attemptsTo(
+ *   Ensure.that(
+ *     Text.ofAll(ShoppingList.outstandingItems()),
+ *     equals([ 'Honey', 'Chocolate' ])
+ *   ),
+ * )
+ * ```
+ *
+ * ## Learn more
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+ * - [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ * - [`Question`](https://serenity-js.org/api/core/class/Question/)
+ *
+ * @group Questions
+ */
+export class Attribute extends Question {
+    name;
+    element;
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified HTML attribute of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param name
+     *  The name of the attribute to retrieve
+     */
+    static called(name) {
+        return new Attribute(name);
+    }
+    constructor(name, element) {
+        super(element
+            ? the `${name} attribute of ${element}`
+            : the `${name} attribute`);
+        this.name = name;
+        this.element = element;
+    }
+    /**
+     * Resolves to the value of an HTML attribute of the `pageElement`.
+     *
+     * #### Learn more
+     * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+     *
+     * @param pageElement
+     */
+    of(pageElement) {
+        return Question.createAdapter(new Attribute(this.name, this.element
+            ? PageElement.of(this.element, pageElement)
+            : pageElement));
+    }
+    /**
+     * @inheritDoc
+     */
+    async answeredBy(actor) {
+        const name = await actor.answer(this.name);
+        if (!this.element) {
+            throw new LogicError(d `Couldn't read attribute ${name} of an unspecified page element`);
+        }
+        const element = await actor.answer(this.element);
+        return element.attribute(name);
+    }
+    /**
+     * @inheritDoc
+     */
+    isPresent() {
+        return Question.about(this.toString(), async (actor) => {
+            const attribute = await this.answeredBy(actor);
+            return attribute !== null && attribute !== undefined;
+        });
+    }
+}
+//# sourceMappingURL=Attribute.js.map

package/esm/screenplay/questions/Attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribute.js","sourceRoot":"","sources":["../../../src/screenplay/questions/Attribute.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,MAAM,OAAO,SACT,SAAQ,QAAyB;IAgBZ;IACA;IAdrB;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,CAAY,IAAwB;QAC7C,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,YACqB,IAAwB,EACxB,OAAoD;QAErE,KAAK,CAAC,OAAO;YACT,CAAC,CAAC,GAAG,CAAA,GAAI,IAAK,iBAAkB,OAAQ,EAAE;YAC1C,CAAC,CAAC,GAAG,CAAA,GAAI,IAAK,YAAY,CAC7B,CAAC;QANe,SAAI,GAAJ,IAAI,CAAoB;QACxB,YAAO,GAAP,OAAO,CAA6C;IAMzE,CAAC;IAED;;;;;;;OAOG;IACH,EAAE,CAAC,WAAiG;QAChG,OAAO,QAAQ,CAAC,aAAa,CACzB,IAAI,SAAS,CACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;YAC3C,CAAC,CAAC,WAAW,CACpB,CACwC,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU,CAAC,KAAuC;QACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,IAAI,CAAE,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,IAAI,UAAU,CAAC,CAAC,CAAA,2BAA4B,IAAK,iCAAiC,CAAC,CAAC;QAC9F,CAAC;QAED,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,SAAS;QACL,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YACjD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC/C,OAAO,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,CAAC;QACzD,CAAC,CAAC,CAAC;IACP,CAAC;CACJ"}

package/esm/screenplay/questions/ComputedStyle.d.ts

@@ -0,0 +1,131 @@
+import type { Answerable, AnswersQuestions, MetaQuestion, MetaQuestionAdapter, QuestionAdapter, UsesAbilities } from '@serenity-js/core';
+import { Question } from '@serenity-js/core';
+import { PageElement } from '../models/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 retrieve
+ * the value of the specified computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example widget
+ *
+ * ```html
+ * <ul id="shopping-list" style="display: block">
+ *   <li style="display: block">Coffee<li>
+ *   <li style="display: none">Honey<li>
+ *   <li style="display: block">Chocolate<li>
+ * </ul>
+ * ```
+ *
+ * ## Retrieve a computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { ComputedStyle, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.id('shopping-list'))
+ *      .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa').attemptsTo(
+ *   Ensure.that(
+ *     ComputedStyle.called('display').of(shoppingList()),
+ *     equals('block')
+ *   ),
+ * )
+ * ```
+ *
+ * ## Using `ComputedStyle` as [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.css('#shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa').attemptsTo(
+ *   Ensure.that(
+ *     ComputedStyle.called('display').of(shoppingList()).toLocaleUpperCase(),
+ *     equals('BLOCK')
+ *   ),
+ * )
+ * ```
+ *
+ * ## Using as filter in [Page Element Query Language](https://serenity-js.org/handbook/web-testing/page-element-query-language/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, includes } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElements } from '@serenity-js/web'
+ *
+ * class ShoppingList {
+ *   static items = () =>
+ *     PageElements.located(By.css('#shopping-list li'))
+ *       .describedAs('items')
+ *
+ *   static outstandingItems = () =>
+ *     ShoppingList.items()
+ *       .where(
+ *         ComputedStyle.called('display'),
+ *         equals('block')
+ *       )
+ * }
+ *
+ * await actorCalled('Lisa')
+ *  .whoCan(BrowseTheWebWithWebdriverIO.using(browser))
+ *  .attemptsTo(
+ *    Ensure.that(
+ *      Text.ofAll(ShoppingList.outstandingItems()),
+ *      equals([ 'Honey', 'Chocolate' ])
+ *    ),
+ *  )
+ * ```
+ *
+ * ## Learn more
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+ * - [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ * - [`Question`](https://serenity-js.org/api/core/class/Question/)
+ *
+ * @group Questions
+ */
+export declare class ComputedStyle<Native_Element_Type> extends Question<Promise<string>> implements MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>> {
+    private readonly name;
+    private readonly element?;
+    private readonly pseudoElement?;
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param name
+     *  The name of the computed style property to retrieve
+     */
+    static called<NET = any>(name: Answerable<string>): ComputedStyle<NET>;
+    protected constructor(name: Answerable<string>, element?: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>, pseudoElement?: Answerable<string>);
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified computed style property of the specified pseudo-element of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param pseudoElement
+     *  The pseudo-element to retrieve the computed style property from, such as `::before` or `::after`
+     */
+    ofPseudoElement(pseudoElement: Answerable<string>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string>;
+    /**
+     * Resolves to the value of a computed style property of the `pageElement`.
+     *
+     * #### Learn more
+     * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+     *
+     * @param pageElement
+     */
+    of(pageElement: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string>;
+    /**
+     * @inheritDoc
+     */
+    answeredBy(actor: AnswersQuestions & UsesAbilities): Promise<string>;
+}
+//# sourceMappingURL=ComputedStyle.d.ts.map

package/esm/screenplay/questions/ComputedStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedStyle.d.ts","sourceRoot":"","sources":["../../../src/screenplay/questions/ComputedStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,aAAa,EAChB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAiB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,qBAAa,aAAa,CAAC,mBAAmB,CAC1C,SAAQ,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAChC,YAAW,YAAY,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAehF,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC;IACzB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;IAfnC;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC;IAItE,SAAS,aACY,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,EACxB,OAAO,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,GAAG,WAAW,CAAC,mBAAmB,CAAC,EAC9F,aAAa,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC;IASvD;;;;;;;OAOG;IACH,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAUjH;;;;;;;OAOG;IACH,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,GAAG,WAAW,CAAC,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAYpK;;OAEG;IACG,UAAU,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;CAc7E"}

package/esm/screenplay/questions/ComputedStyle.js

@@ -0,0 +1,157 @@
+import { d, LogicError, Question } from '@serenity-js/core';
+import { BrowseTheWeb } from '../abilities/index.js';
+import { PageElement } from '../models/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 retrieve
+ * the value of the specified computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+ *
+ * ## Example widget
+ *
+ * ```html
+ * <ul id="shopping-list" style="display: block">
+ *   <li style="display: block">Coffee<li>
+ *   <li style="display: none">Honey<li>
+ *   <li style="display: block">Chocolate<li>
+ * </ul>
+ * ```
+ *
+ * ## Retrieve a computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { ComputedStyle, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.id('shopping-list'))
+ *      .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa').attemptsTo(
+ *   Ensure.that(
+ *     ComputedStyle.called('display').of(shoppingList()),
+ *     equals('block')
+ *   ),
+ * )
+ * ```
+ *
+ * ## Using `ComputedStyle` as [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, equals } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElement } from '@serenity-js/web'
+ *
+ * const shoppingList = () =>
+ *   PageElement.located(By.css('#shopping-list'))
+ *     .describedAs('shopping list')
+ *
+ * await actorCalled('Lisa').attemptsTo(
+ *   Ensure.that(
+ *     ComputedStyle.called('display').of(shoppingList()).toLocaleUpperCase(),
+ *     equals('BLOCK')
+ *   ),
+ * )
+ * ```
+ *
+ * ## Using as filter in [Page Element Query Language](https://serenity-js.org/handbook/web-testing/page-element-query-language/)
+ *
+ * ```ts
+ * import { actorCalled } from '@serenity-js/core'
+ * import { Ensure, includes } from '@serenity-js/assertions'
+ * import { Attribute, By, PageElements } from '@serenity-js/web'
+ *
+ * class ShoppingList {
+ *   static items = () =>
+ *     PageElements.located(By.css('#shopping-list li'))
+ *       .describedAs('items')
+ *
+ *   static outstandingItems = () =>
+ *     ShoppingList.items()
+ *       .where(
+ *         ComputedStyle.called('display'),
+ *         equals('block')
+ *       )
+ * }
+ *
+ * await actorCalled('Lisa')
+ *  .whoCan(BrowseTheWebWithWebdriverIO.using(browser))
+ *  .attemptsTo(
+ *    Ensure.that(
+ *      Text.ofAll(ShoppingList.outstandingItems()),
+ *      equals([ 'Honey', 'Chocolate' ])
+ *    ),
+ *  )
+ * ```
+ *
+ * ## Learn more
+ * - [`BrowseTheWeb`](https://serenity-js.org/api/web/class/BrowseTheWeb/)
+ * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+ * - [`QuestionAdapter`](https://serenity-js.org/api/core/#QuestionAdapter)
+ * - [`Question`](https://serenity-js.org/api/core/class/Question/)
+ *
+ * @group Questions
+ */
+export class ComputedStyle extends Question {
+    name;
+    element;
+    pseudoElement;
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified computed style property of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param name
+     *  The name of the computed style property to retrieve
+     */
+    static called(name) {
+        return new ComputedStyle(name);
+    }
+    constructor(name, element, pseudoElement) {
+        super([
+            d `computed style property ${name}`,
+            pseudoElement && d `of pseudo-element ${pseudoElement}`,
+            element && d `of ${element}`,
+        ].filter(Boolean).join(' '));
+        this.name = name;
+        this.element = element;
+        this.pseudoElement = pseudoElement;
+    }
+    /**
+     * Instantiates a [`Question`](https://serenity-js.org/api/core/class/Question/) that 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 retrieve
+     * the value of the specified computed style property of the specified pseudo-element of a given [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
+     *
+     * @param pseudoElement
+     *  The pseudo-element to retrieve the computed style property from, such as `::before` or `::after`
+     */
+    ofPseudoElement(pseudoElement) {
+        return Question.createAdapter(new ComputedStyle(this.name, this.element, pseudoElement));
+    }
+    /**
+     * Resolves to the value of a computed style property of the `pageElement`.
+     *
+     * #### Learn more
+     * - [`MetaQuestion`](https://serenity-js.org/api/core/interface/MetaQuestion/)
+     *
+     * @param pageElement
+     */
+    of(pageElement) {
+        return Question.createAdapter(new ComputedStyle(this.name, this.element
+            ? PageElement.of(this.element, pageElement)
+            : pageElement, this.pseudoElement));
+    }
+    /**
+     * @inheritDoc
+     */
+    async answeredBy(actor) {
+        const name = await actor.answer(this.name);
+        if (!this.element) {
+            throw new LogicError(d `Couldn't read computed style property ${name} of an unspecified page element`);
+        }
+        const element = await actor.answer(this.element);
+        const pseudoElement = await actor.answer(this.pseudoElement);
+        const page = await BrowseTheWeb.as(actor).currentPage();
+        return page.executeScript('return window.getComputedStyle(arguments[0], arguments[1]).getPropertyValue(arguments[2])', element, pseudoElement, name);
+    }
+}
+//# sourceMappingURL=ComputedStyle.js.map

package/esm/screenplay/questions/ComputedStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedStyle.js","sourceRoot":"","sources":["../../../src/screenplay/questions/ComputedStyle.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,MAAM,OAAO,aACT,SAAQ,QAAyB;IAgBZ;IACA;IACA;IAfrB;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,CAAY,IAAwB;QAC7C,OAAO,IAAI,aAAa,CAAM,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,YACqB,IAAwB,EACxB,OAA8F,EAC9F,aAAkC;QAEnD,KAAK,CAAC;YACF,CAAC,CAAA,2BAA4B,IAAK,EAAE;YACpC,aAAa,IAAI,CAAC,CAAA,qBAAsB,aAAc,EAAE;YACxD,OAAO,IAAI,CAAC,CAAA,MAAO,OAAQ,EAAE;SAChC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QARZ,SAAI,GAAJ,IAAI,CAAoB;QACxB,YAAO,GAAP,OAAO,CAAuF;QAC9F,kBAAa,GAAb,aAAa,CAAqB;IAOvD,CAAC;IAED;;;;;;;OAOG;IACH,eAAe,CAAC,aAAiC;QAC7C,OAAO,QAAQ,CAAC,aAAa,CACzB,IAAI,aAAa,CACb,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO,EACZ,aAAa,CAChB,CAC6D,CAAC;IACvE,CAAC;IAED;;;;;;;OAOG;IACH,EAAE,CAAC,WAAiG;QAChG,OAAO,QAAQ,CAAC,aAAa,CACzB,IAAI,aAAa,CACb,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;YAC3C,CAAC,CAAC,WAAW,EACjB,IAAI,CAAC,aAAa,CACrB,CAC6D,CAAC;IACvE,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU,CAAC,KAAuC;QACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,IAAI,CAAE,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,IAAI,UAAU,CAAC,CAAC,CAAA,yCAA0C,IAAK,iCAAiC,CAAC,CAAC;QAC5G,CAAC;QAED,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,MAAM,aAAa,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE7D,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;QAExD,OAAO,IAAI,CAAC,aAAa,CAAC,2FAA2F,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;IACzJ,CAAC;CACJ"}