@serenity-js/web 3.13.2 → 3.14.0

package/lib/screenplay/questions/ComputedStyle.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComputedStyle = void 0;
+const core_1 = require("@serenity-js/core");
+const abilities_1 = require("../abilities");
+const models_1 = require("../models");
+/**
+ * Uses the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+ * the value of the specified computed style property of a given {@apilink 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 {@apilink 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 {@apilink 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 {@apilink PageElements|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
+ * - {@apilink BrowseTheWeb}
+ * - {@apilink MetaQuestion}
+ * - {@apilink QuestionAdapter}
+ * - {@apilink Question}
+ *
+ * @group Questions
+ */
+class ComputedStyle extends core_1.Question {
+    name;
+    element;
+    pseudoElement;
+    subject;
+    /**
+     * Instantiates a {@apilink Question} that uses
+     * the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+     * the value of the specified computed style property of a given {@apilink PageElement}.
+     *
+     * @param name
+     *  The name of the computed style property to retrieve
+     */
+    static called(name) {
+        return new ComputedStyle(name);
+    }
+    constructor(name, element, pseudoElement) {
+        super();
+        this.name = name;
+        this.element = element;
+        this.pseudoElement = pseudoElement;
+        this.subject = [
+            (0, core_1.d) `computed style property ${name}`,
+            pseudoElement && (0, core_1.d) `of pseudo-element ${pseudoElement}`,
+            element && (0, core_1.d) `of ${element}`,
+        ].filter(Boolean).join(' ');
+    }
+    /**
+     * Instantiates a {@apilink Question} that uses
+     * the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+     * the value of the specified computed style property of the specified pseudo-element of a given {@apilink PageElement}.
+     *
+     * @param pseudoElement
+     *  The pseudo-element to retrieve the computed style property from, such as `::before` or `::after`
+     */
+    ofPseudoElement(pseudoElement) {
+        return core_1.Question.createAdapter(new ComputedStyle(this.name, this.element, pseudoElement));
+    }
+    /**
+     * Resolves to the value of a computed style property of the `pageElement`.
+     *
+     * #### Learn more
+     * - {@apilink MetaQuestion}
+     *
+     * @param pageElement
+     */
+    of(pageElement) {
+        return core_1.Question.createAdapter(new ComputedStyle(this.name, this.element
+            ? models_1.PageElement.of(this.element, pageElement)
+            : pageElement, this.pseudoElement));
+    }
+    /**
+     * @inheritDoc
+     */
+    async answeredBy(actor) {
+        const name = await actor.answer(this.name);
+        if (!this.element) {
+            throw new core_1.LogicError((0, core_1.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 abilities_1.BrowseTheWeb.as(actor).currentPage();
+        return page.executeScript('return window.getComputedStyle(arguments[0], arguments[1]).getPropertyValue(arguments[2])', element, pseudoElement, name);
+    }
+    /**
+     * @inheritDoc
+     */
+    describedAs(subject) {
+        this.subject = subject;
+        return this;
+    }
+    /**
+     * @inheritDoc
+     */
+    toString() {
+        return this.subject;
+    }
+}
+exports.ComputedStyle = ComputedStyle;
+//# sourceMappingURL=ComputedStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComputedStyle.js","sourceRoot":"","sources":["../../../src/screenplay/questions/ComputedStyle.ts"],"names":[],"mappings":";;;AAQA,4CAA4D;AAE5D,4CAA4C;AAC5C,sCAAwC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,MAAa,aACT,SAAQ,eAAyB;IAkBZ;IACA;IACA;IAjBb,OAAO,CAAS;IAExB;;;;;;;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,EAAE,CAAC;QAJS,SAAI,GAAJ,IAAI,CAAoB;QACxB,YAAO,GAAP,OAAO,CAAuF;QAC9F,kBAAa,GAAb,aAAa,CAAqB;QAInD,IAAI,CAAC,OAAO,GAAG;YACX,IAAA,QAAC,EAAA,2BAA4B,IAAK,EAAE;YACpC,aAAa,IAAI,IAAA,QAAC,EAAA,qBAAsB,aAAc,EAAE;YACxD,OAAO,IAAI,IAAA,QAAC,EAAA,MAAO,OAAQ,EAAE;SAChC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC;IAED;;;;;;;OAOG;IACH,eAAe,CAAC,aAAiC;QAC7C,OAAO,eAAQ,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,eAAQ,CAAC,aAAa,CACzB,IAAI,aAAa,CACb,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO;YACR,CAAC,CAAC,oBAAW,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;YAChB,MAAM,IAAI,iBAAU,CAAC,IAAA,QAAC,EAAA,yCAA0C,IAAK,iCAAiC,CAAC,CAAC;SAC3G;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,wBAAY,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;IAED;;OAEG;IACH,WAAW,CAAC,OAAe;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,QAAQ;QACJ,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;CACJ;AAtGD,sCAsGC"}

package/lib/screenplay/questions/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Attribute';
+export * from './ComputedStyle';
 export * from './CssClasses';
 export * from './LastScriptExecution';
 export * from './Selected';

package/lib/screenplay/questions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screenplay/questions/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screenplay/questions/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/lib/screenplay/questions/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Attribute"), exports);
+__exportStar(require("./ComputedStyle"), exports);
 __exportStar(require("./CssClasses"), exports);
 __exportStar(require("./LastScriptExecution"), exports);
 __exportStar(require("./Selected"), exports);

package/lib/screenplay/questions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/screenplay/questions/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,+CAA6B;AAC7B,wDAAsC;AACtC,6CAA2B;AAC3B,yCAAuB;AACvB,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/screenplay/questions/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,kDAAgC;AAChC,+CAA6B;AAC7B,wDAAsC;AACtC,6CAA2B;AAC3B,yCAAuB;AACvB,0CAAwB"}

package/lib/stage/crew/photographer/Photographer.js

@@ -175,6 +175,8 @@ const strategies = __importStar(require("./strategies"));
  * @group Stage
  */
 class Photographer {
+    photoTakingStrategy;
+    stage;
     /**
      * Instantiates a new {@apilink Photographer} configured to take photos (screenshots)
      * as per the specified {@apilink PhotoTakingStrategy}.
@@ -197,8 +199,8 @@ class Photographer {
             if (availableStrategies.includes(config.strategy)) {
                 return new Photographer(new strategies[config.strategy]());
             }
-            throw new core_1.ConfigurationError(`'${config.strategy}' is not an available PhotoTakingStrategy. ` +
-                `Available strategies: ${availableStrategies.join(', ')}.`);
+            throw new core_1.ConfigurationError(`'${config.strategy}' is not an available PhotoTakingStrategy, ` +
+                `available strategies: ${availableStrategies.join(', ')}.`);
         }
         return new Photographer(new strategies.TakePhotosOfFailures());
     }

package/lib/stage/crew/photographer/Photographer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Photographer.js","sourceRoot":"","sources":["../../../../src/stage/crew/photographer/Photographer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAmE;AAEnE,yDAAgF;AAGhF,yDAA2C;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkJG;AACH,MAAa,YAAY;IAErB;;;;;;OAMG;IACH,MAAM,CAAC,OAAO,CAAC,QAAkD;QAC7D,OAAO,IAAI,YAAY,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,MAA4E;QACxF,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,EAAE;YAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,UAAU,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA,CAAI,yBAAyB;YAErJ,IAAI,mBAAmB,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAkB,CAAC,EAAE;gBACzD,OAAO,IAAI,YAAY,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,QAAkB,CAAC,EAAE,CAAC,CAAC;aACxE;YAED,MAAM,IAAI,yBAAkB,CACxB,IAAK,MAAM,CAAC,QAAS,6CAA6C;gBAClE,yBAA0B,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAE,GAAG,CAC/D,CAAC;SACL;QAED,OAAO,IAAI,YAAY,CAAC,IAAI,UAAU,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,YACqB,mBAAmD,EAC5D,KAAa;QADJ,wBAAmB,GAAnB,mBAAmB,CAAgC;QAC5D,UAAK,GAAL,KAAK,CAAQ;IAEzB,CAAC;IAED;;;;;OAKG;IACH,UAAU,CAAC,KAAY;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;OAKG;IACH,QAAQ,CAAC,KAAkB;QACvB,IAAI,CAAE,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,IAAI,iBAAU,CAAC,8FAA8F,CAAC,CAAC;SACxH;QAED,IAAI,CAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,EAAE;YAClC,OAAO,KAAK,CAAC,CAAC;SACjB;QAED,IAAI,KAAK,YAAY,uBAAc,IAAI,KAAK,YAAY,yBAAgB,EAAE;YACtE,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACnE;IACL,CAAC;CACJ;AAxED,oCAwEC"}
+{"version":3,"file":"Photographer.js","sourceRoot":"","sources":["../../../../src/stage/crew/photographer/Photographer.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAmE;AAEnE,yDAAgF;AAGhF,yDAA2C;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkJG;AACH,MAAa,YAAY;IAqCA;IACT;IApCZ;;;;;;OAMG;IACH,MAAM,CAAC,OAAO,CAAC,QAAkD;QAC7D,OAAO,IAAI,YAAY,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,MAA4E;QACxF,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,EAAE;YAC3B,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,KAAK,UAAU,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAA,CAAI,yBAAyB;YAErJ,IAAI,mBAAmB,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAkB,CAAC,EAAE;gBACzD,OAAO,IAAI,YAAY,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,QAAkB,CAAC,EAAE,CAAC,CAAC;aACxE;YAED,MAAM,IAAI,yBAAkB,CACxB,IAAK,MAAM,CAAC,QAAS,6CAA6C;gBAClE,yBAA0B,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAE,GAAG,CAC/D,CAAC;SACL;QAED,OAAO,IAAI,YAAY,CAAC,IAAI,UAAU,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,YACqB,mBAAmD,EAC5D,KAAa;QADJ,wBAAmB,GAAnB,mBAAmB,CAAgC;QAC5D,UAAK,GAAL,KAAK,CAAQ;IAEzB,CAAC;IAED;;;;;OAKG;IACH,UAAU,CAAC,KAAY;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;OAKG;IACH,QAAQ,CAAC,KAAkB;QACvB,IAAI,CAAE,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,IAAI,iBAAU,CAAC,8FAA8F,CAAC,CAAC;SACxH;QAED,IAAI,CAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,EAAE;YAClC,OAAO,KAAK,CAAC,CAAC;SACjB;QAED,IAAI,KAAK,YAAY,uBAAc,IAAI,KAAK,YAAY,yBAAgB,EAAE;YACtE,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACnE;IACL,CAAC;CACJ;AAxED,oCAwEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serenity-js/web",
-  "version": "3.13.2",
+  "version": "3.14.0",
   "description": "Serenity/JS Screenplay Pattern APIs for the Web",
   "author": {
     "name": "Jan Molak",
@@ -44,19 +44,19 @@
     "node": "^16.13 || ^18.12 || ^20"
   },
   "dependencies": {
-    "@serenity-js/assertions": "3.13.2",
-    "@serenity-js/core": "3.13.2",
+    "@serenity-js/assertions": "3.14.0",
+    "@serenity-js/core": "3.14.0",
     "tiny-types": "^1.21.0"
   },
   "devDependencies": {
     "@integration/testing-tools": "3.0.0",
-    "@types/chai": "^4.3.10",
-    "@types/mocha": "^10.0.4",
+    "@types/chai": "^4.3.11",
+    "@types/mocha": "^10.0.6",
     "c8": "8.0.1",
     "mocha": "^10.2.0",
     "mocha-multi": "^1.1.7",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6"
   },
-  "gitHead": "ed08db56c2c947c2c2ac4d9d4e95f9f68e90d2a4"
+  "gitHead": "a81b85d03b62c662c00aecebc75ed35a97815a6b"
 }

package/src/screenplay/questions/Attribute.ts

@@ -20,13 +20,13 @@ import { PageElement } from '../models';
  * ## Retrieve an HTML attribute of a given {@apilink PageElement}
  *
  * ```ts
- *  import { actorCalled } from '@serenity-js/core'
- *  import { Ensure, equals } from '@serenity-js/assertions'
- *  import { Attribute, By, PageElement } from '@serenity-js/web'
+ * 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')
+ * const shoppingList = () =>
+ *   PageElement.located(By.id('shopping-list'))
+ *     .describedAs('shopping list')
  *
  * await actorCalled('Lisa')
  *   .attemptsTo(
@@ -95,9 +95,9 @@ import { PageElement } from '../models';
  *
  * @group Questions
  */
-export class Attribute
+export class Attribute<Native_Element_Type>
     extends Question<Promise<string>>
-    implements MetaQuestion<PageElement, Question<Promise<string>>>
+    implements MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>>
 {
     private subject: string;
 
@@ -109,7 +109,7 @@ export class Attribute
      * @param name
      *  The name of the attribute to retrieve
      */
-    static called(name: Answerable<string>): Attribute {
+    static called<NET = any>(name: Answerable<string>): Attribute<NET> {
         return new Attribute(name);
     }
 
@@ -131,7 +131,7 @@ export class Attribute
      *
      * @param pageElement
      */
-    of(pageElement: QuestionAdapter<PageElement> | PageElement): MetaQuestionAdapter<PageElement, string> {
+    of(pageElement: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string> {
         return Question.createAdapter(
             new Attribute(
                 this.name,
@@ -149,7 +149,7 @@ export class Attribute
         const name = await actor.answer(this.name);
 
         if (! this.element) {
-            throw new LogicError(d`Couldn't read attribute ${ name } of an unspecified page element.`);
+            throw new LogicError(d`Couldn't read attribute ${ name } of an unspecified page element`);
         }
 
         const element = await actor.answer(this.element);

package/src/screenplay/questions/ComputedStyle.ts

@@ -0,0 +1,206 @@
+import type {
+    Answerable,
+    AnswersQuestions,
+    MetaQuestion,
+    MetaQuestionAdapter,
+    QuestionAdapter,
+    UsesAbilities
+} from '@serenity-js/core';
+import { d, LogicError, Question } from '@serenity-js/core';
+
+import { BrowseTheWeb } from '../abilities';
+import { PageElement } from '../models';
+
+/**
+ * Uses the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+ * the value of the specified computed style property of a given {@apilink 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 {@apilink 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 {@apilink 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 {@apilink PageElements|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
+ * - {@apilink BrowseTheWeb}
+ * - {@apilink MetaQuestion}
+ * - {@apilink QuestionAdapter}
+ * - {@apilink Question}
+ *
+ * @group Questions
+ */
+export class ComputedStyle<Native_Element_Type>
+    extends Question<Promise<string>>
+    implements MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>>
+{
+    private subject: string;
+
+    /**
+     * Instantiates a {@apilink Question} that uses
+     * the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+     * the value of the specified computed style property of a given {@apilink PageElement}.
+     *
+     * @param name
+     *  The name of the computed style property to retrieve
+     */
+    static called<NET = any>(name: Answerable<string>): ComputedStyle<NET> {
+        return new ComputedStyle<NET>(name);
+    }
+
+    protected constructor(
+        private readonly name: Answerable<string>,
+        private readonly element?: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>,
+        private readonly pseudoElement?: Answerable<string>,
+    ) {
+        super();
+
+        this.subject = [
+            d`computed style property ${ name }`,
+            pseudoElement && d`of pseudo-element ${ pseudoElement }`,
+            element && d`of ${ element }`,
+        ].filter(Boolean).join(' ');
+    }
+
+    /**
+     * Instantiates a {@apilink Question} that uses
+     * the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
+     * the value of the specified computed style property of the specified pseudo-element of a given {@apilink 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> {
+        return Question.createAdapter(
+            new ComputedStyle<Native_Element_Type>(
+                this.name,
+                this.element,
+                pseudoElement,
+            )
+        ) as MetaQuestionAdapter<PageElement<Native_Element_Type>, string>;
+    }
+
+    /**
+     * Resolves to the value of a computed style property of the `pageElement`.
+     *
+     * #### Learn more
+     * - {@apilink MetaQuestion}
+     *
+     * @param pageElement
+     */
+    of(pageElement: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>): MetaQuestionAdapter<PageElement<Native_Element_Type>, string> {
+        return Question.createAdapter(
+            new ComputedStyle<Native_Element_Type>(
+                this.name,
+                this.element
+                    ? PageElement.of(this.element, pageElement)
+                    : pageElement,
+                this.pseudoElement,
+            )
+        ) as MetaQuestionAdapter<PageElement<Native_Element_Type>, string>;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    async answeredBy(actor: AnswersQuestions & UsesAbilities): Promise<string> {
+        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);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    describedAs(subject: string): this {
+        this.subject = subject;
+        return this;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    toString(): string {
+        return this.subject;
+    }
+}

package/src/screenplay/questions/index.ts

@@ -1,4 +1,5 @@
 export * from './Attribute';
+export * from './ComputedStyle';
 export * from './CssClasses';
 export * from './LastScriptExecution';
 export * from './Selected';

package/src/stage/crew/photographer/Photographer.ts

@@ -180,8 +180,8 @@ export class Photographer implements StageCrewMember {
             }
 
             throw new ConfigurationError(
-                `'${ config.strategy }' is not an available PhotoTakingStrategy. ` +
-                `Available strategies: ${ availableStrategies.join(', ') }.`
+                `'${ config.strategy }' is not an available PhotoTakingStrategy, ` +
+                `available strategies: ${ availableStrategies.join(', ') }.`
             );
         }
 

package/tsconfig.build.json

@@ -4,7 +4,7 @@
     "outDir": "lib",
     "rootDir": "src",
     "lib": [
-      "es2021",
+      "es2022",
       "dom"
     ]
   },