@serenity-js/web 3.23.2 → 3.24.0

package/src/screenplay/interactions/Hover.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, Interaction, UsesAbilities } from '@serenity-js/core';
-import { d } from '@serenity-js/core';
+import { the } from '@serenity-js/core';
 
 import type { PageElement } from '../models';
 import { PageElementInteraction } from './PageElementInteraction';
@@ -66,7 +66,7 @@ export class Hover extends PageElementInteraction {
     }
 
     protected constructor(private readonly element: Answerable<PageElement>) {
-        super(d `#actor hovers the mouse over ${ element }`);
+        super(the `#actor hovers the mouse over ${ element }`);
     }
 
     /**

package/src/screenplay/interactions/Navigate.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
-import { d, Interaction, TestCompromisedError } from '@serenity-js/core';
+import { Interaction, TestCompromisedError, the } from '@serenity-js/core';
 
 import { BrowseTheWeb } from '../abilities';
 
@@ -167,7 +167,7 @@ export class Navigate {
  */
 class NavigateToUrl extends Interaction {
     constructor(private readonly url: Answerable<string>) {
-        super(d`#actor navigates to ${ url }`);
+        super(the`#actor navigates to ${ url }`);
     }
 
     /**

package/src/screenplay/interactions/PageElementInteraction.ts

@@ -14,7 +14,7 @@ import type { PageElement } from '../models';
  */
 export abstract class PageElementInteraction extends Interaction {
 
-    protected constructor(description: string, location: FileSystemLocation = Interaction.callerLocation(4)) {
+    protected constructor(description: Answerable<string>, location: FileSystemLocation = Interaction.callerLocation(4)) {
         super(description, location);
     }
 

package/src/screenplay/interactions/Press.ts

@@ -1,5 +1,5 @@
 import type { Activity, Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
-import { d, Interaction, Question } from '@serenity-js/core';
+import { Interaction, Question, the } from '@serenity-js/core';
 import { asyncMap } from '@serenity-js/core/lib/io';
 
 import { BrowseTheWeb } from '../abilities';
@@ -94,7 +94,7 @@ export class Press extends PageElementInteraction {
     protected constructor(
         private readonly keys: Answerable<Array<Key | string>>
     ) {
-        super(d `#actor presses ${ keys }`);
+        super(the `#actor presses ${ keys }`);
     }
 
     /**
@@ -119,7 +119,7 @@ class PressKeyInField extends PageElementInteraction {
         private readonly keys: Answerable<Array<Key | string>>,
         private readonly field: Answerable<PageElement> /* todo | Question<AlertPromise> | AlertPromise */,
     ) {
-        super(d `#actor presses ${ keys } in ${ field }`, Interaction.callerLocation(3));
+        super(the`#actor presses ${ keys } in ${ field }`, Interaction.callerLocation(3));
     }
 
     /**
@@ -147,15 +147,12 @@ class PressKeyInField extends PageElementInteraction {
  * @package
  */
 class KeySequence extends Question<Promise<Array<Key | string>>> {
-    private subject: string;
-
     static of(keys: Array<Answerable<Key | string | Key[] | string[]>>) {
         return new KeySequence(keys);
     }
 
     constructor(private readonly keys: Array<Answerable<Key | string | Key[] | string[]>>) {
-        super();
-        this.subject = KeySequence.describe(keys);
+        super(KeySequence.describe(keys));
     }
 
     async answeredBy(actor: AnswersQuestions & UsesAbilities): Promise<Array<string | Key>> {
@@ -166,23 +163,6 @@ class KeySequence extends Question<Promise<Array<Key | string>>> {
             .filter(key => !! key);
     }
 
-    /**
-     * Changes the description of this question's subject.
-     *
-     * @param subject
-     */
-    describedAs(subject: string): this {
-        this.subject = subject;
-        return this;
-    }
-
-    /**
-     * @inheritDoc
-     */
-    toString(): string {
-        return this.subject;
-    }
-
     private static describe(keys: Array<Answerable<Key | string | Key[] | string[]>>): string {
         const prefix = keys.length === 1 ? 'key' : 'keys';
 

package/src/screenplay/interactions/RightClick.ts

@@ -1,7 +1,7 @@
-import type { Answerable, AnswersQuestions, Interaction, UsesAbilities } from '@serenity-js/core';
-import { d } from '@serenity-js/core';
-
-import type { PageElement } from '../models';
+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';
 
 /**
@@ -80,7 +80,7 @@ export class RightClick extends PageElementInteraction {
     }
 
     protected constructor(private readonly pageElement: Answerable<PageElement>) {
-        super(d `#actor right-clicks on ${ pageElement }`);
+        super(the `#actor right-clicks on ${ pageElement }`);
     }
 
     /**

package/src/screenplay/interactions/Scroll.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
-import { d, Interaction } from '@serenity-js/core';
+import { Interaction, the } from '@serenity-js/core';
 
 import type { PageElement } from '../models';
 
@@ -63,14 +63,14 @@ export class Scroll extends Interaction {
     }
 
     protected constructor(private readonly element: Answerable<PageElement>) {
-        super(d`#actor scrolls to ${ element }`);
+        super(the`#actor scrolls to ${ element }`);
     }
 
     /**
      * @inheritDoc
      */
     async performAs(actor: UsesAbilities & AnswersQuestions): Promise<void> {
-        const target = await actor.answer(this.element);
-        await target.scrollIntoView();
+        const pageElement = await actor.answer(this.element);
+        await pageElement.scrollIntoView();
     }
 }

package/src/screenplay/interactions/Select.ts

@@ -1,10 +1,8 @@
-import type { Answerable} from '@serenity-js/core';
-import { d } from '@serenity-js/core';
+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 { Interaction } from '@serenity-js/core/lib/screenplay';
 
-import type { PageElement} from '../models';
+import type { PageElement } from '../models';
 import { SelectOption } from '../models';
 
 /**
@@ -33,7 +31,7 @@ export class Select {
      *   <option value='PL'>Poland</option>
      *   <option value='US'>United States</option>
      * </select>
-     * ```
+     * ```C
      *
      * #### Lean Page Object describing the widget
      *
@@ -72,7 +70,7 @@ export class Select {
     static value(value: Answerable<string>): { from: (pageElement: Answerable<PageElement>) => Interaction } {
         return {
             from: (pageElement: Answerable<PageElement>): Interaction =>
-                Interaction.where(d`#actor selects value ${ value } from ${ pageElement }`, async actor => {
+                Interaction.where(the`#actor selects value ${ value } from ${ pageElement }`, async actor => {
                     const element       = await actor.answer(pageElement);
                     const desiredValue  = await actor.answer(value);
 
@@ -203,7 +201,7 @@ export class Select {
     static option(value: Answerable<string>): { from: (pageElement: Answerable<PageElement>) => Interaction } {
         return {
             from: (pageElement: Answerable<PageElement>): Interaction =>
-                Interaction.where(d`#actor selects ${ value } from ${ pageElement }`, async actor => {
+                Interaction.where(the`#actor selects ${ value } from ${ pageElement }`, async actor => {
                     const element       = await actor.answer(pageElement);
                     const desiredLabel  = await actor.answer(value);
 

package/src/screenplay/interactions/Switch.ts

@@ -1,5 +1,5 @@
 import type { Activity, Actor, Answerable, AnswersQuestions, UsesAbilities } from '@serenity-js/core';
-import { Interaction, Task } from '@serenity-js/core';
+import { Interaction, Task, the } from '@serenity-js/core';
 
 import type { Switchable } from '../models';
 
@@ -117,7 +117,7 @@ export class Switch extends Interaction {
     }
 
     protected constructor(private readonly switchable: Answerable<Switchable>) {
-        super(`#actor switches to ${ switchable }`);
+        super(the`#actor switches to ${ switchable }`);
     }
 
     /**
@@ -151,7 +151,7 @@ class SwitchAndPerformActivities extends Task {
         private readonly switchable: Answerable<Switchable>,
         private readonly activities: Activity[]
     ) {
-        super(`#actor switches to ${ switchable }`);
+        super(the `#actor switches to ${ switchable }`);
     }
 
     /**

package/src/screenplay/interactions/TakeScreenshot.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, CollectsArtifacts, UsesAbilities } from '@serenity-js/core';
-import { d, Interaction } from '@serenity-js/core';
+import { Interaction, the } from '@serenity-js/core';
 import { Name, Photo } from '@serenity-js/core/lib/model';
 
 import { BrowseTheWeb } from '../abilities';
@@ -45,7 +45,7 @@ export class TakeScreenshot extends Interaction {
     }
 
     protected constructor(private readonly name: Answerable<string>) {
-        super(d`#actor takes a screenshot of ${ name }`);
+        super(the`#actor takes a screenshot of ${ name }`);
     }
 
     /**

package/src/screenplay/models/ArgumentDehydrator.ts

@@ -1,4 +1,4 @@
-import { isPlainObject } from '@serenity-js/core/lib/io';
+import { ValueInspector } from '@serenity-js/core/lib/io';
 
 /* eslint-disable @typescript-eslint/indent */
 type TransformedArgument<T, U> =
@@ -43,7 +43,7 @@ export class ArgumentDehydrator<T, U> {
                 };
             }
 
-            if (isPlainObject(arg)) {
+            if (ValueInspector.isPlainObject(arg)) {
                 const { args: nestedArgs, refs: nestedRefs, refsCount: currentRefsCount } = await this.dehydrateRecursively(Object.values(arg), refsCount);
                 return {
                     args: [ ...args, Object.fromEntries(Object.keys(arg).map((key, i) => [ key, nestedArgs[i] ])) ],

package/src/screenplay/models/Cookie.ts

@@ -1,5 +1,5 @@
 import type { Answerable, Optional, QuestionAdapter, WithAnswerableProperties } from '@serenity-js/core';
-import { d, Interaction, Question, Timestamp } from '@serenity-js/core';
+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';
 
@@ -101,7 +101,7 @@ export abstract class Cookie implements Optional {
      */
     static set(cookieData: Answerable<WithAnswerableProperties<CookieData>>): Interaction {
 
-        return Interaction.where(d `#actor sets cookie: ${ cookieData }`, async actor => {
+        return Interaction.where(the`#actor sets cookie: ${ cookieData }`, async actor => {
             const cookie = ensure('cookieData', await actor.answer(Question.fromObject(cookieData)) as CookieData, isDefined(), isPlainObject());
 
             const page = await BrowseTheWeb.as(actor).currentPage();

package/src/screenplay/models/PageElement.ts

@@ -1,5 +1,5 @@
 import type { Answerable, MetaQuestionAdapter, Optional } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+import { Question, the } from '@serenity-js/core';
 import { ensure, isDefined } from 'tiny-types';
 
 import { BrowseTheWeb } from '../abilities';
@@ -31,7 +31,7 @@ export abstract class PageElement<Native_Element_Type = any> implements Optional
     }
 
     static located<NET>(selector: Answerable<Selector>): MetaQuestionAdapter<PageElement<NET>, PageElement<NET>> {
-        return Question.about(d`page element located ${ selector }`, async actor => {
+        return Question.about(the`page element located ${ selector }`, async actor => {
             const bySelector  = await actor.answer(selector);
             const currentPage = await BrowseTheWeb.as<BrowseTheWeb<NET>>(actor).currentPage();
 
@@ -43,7 +43,7 @@ export abstract class PageElement<Native_Element_Type = any> implements Optional
         childElement: MetaQuestionAdapter<PageElement<NET>, PageElement<NET>> | PageElement<NET>,
         parentElement: Answerable<PageElement<NET>>
     ): MetaQuestionAdapter<PageElement<NET>, PageElement<NET>> {
-        return Question.about(d`${ childElement } of ${ parentElement }`, async actor => {
+        return Question.about(the`${ childElement } of ${ parentElement }`, async actor => {
             const parent = await actor.answer(parentElement);
             const child = childElement.of(parent)
 

package/src/screenplay/models/PageElementsLocator.ts

@@ -1,5 +1,5 @@
-import type { Answerable, AnswersQuestions, ChainableMetaQuestion, UsesAbilities  } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+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';
@@ -15,7 +15,7 @@ export class PageElementsLocator<Native_Element_Type = any>
 {
     static fromDocumentRoot<NET>(selector: Answerable<Selector>): PageElementsLocator<NET> {
         return new PageElementsLocator(
-            Question.about(d`page elements located ${ selector }`, async actor => {
+            Question.about(the`page elements located ${ selector }`, async actor => {
                 const bySelector  = await actor.answer(selector);
                 const currentPage = await BrowseTheWeb.as<BrowseTheWeb<NET>>(actor).currentPage();
 
@@ -24,15 +24,13 @@ export class PageElementsLocator<Native_Element_Type = any>
         );
     }
 
-    private subject?: string;
-
     constructor(private readonly locator: Answerable<Locator<Native_Element_Type>>) {
-        super();
+        super(the`${ locator }`);
     }
 
     of(parent: Answerable<PageElement<Native_Element_Type>>): Question<Promise<Array<PageElement<Native_Element_Type>>>> & ChainableMetaQuestion<PageElement<Native_Element_Type>, Question<Promise<Array<PageElement<Native_Element_Type>>>>> {
         return new PageElementsLocator(
-            Question.about(this.toString() + d` of ${ parent }`, async actor => {
+            Question.about(the`${ this } of ${ parent }`, async actor => {
                 const locator: Locator<Native_Element_Type>             = await actor.answer(this.locator);
                 const parentElement: PageElement<Native_Element_Type>   = await actor.answer(parent);
 
@@ -45,13 +43,4 @@ export class PageElementsLocator<Native_Element_Type = any>
         const resolved: Locator<Native_Element_Type> = await actor.answer(this.locator);
         return resolved.allElements();
     }
-
-    describedAs(subject: string): this {
-        this.subject = subject;
-        return this;
-    }
-
-    toString(): string {
-        return this.subject ?? d`${ this.locator }`;
-    }
 }

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

@@ -1,5 +1,5 @@
 import type { Answerable, Interaction, Optional, Question, QuestionAdapter } from '@serenity-js/core';
-import { d } from '@serenity-js/core';
+import { the } from '@serenity-js/core';
 
 import { Page } from '../Page';
 
@@ -140,7 +140,7 @@ export abstract class ModalDialog implements Optional {
      */
     static acceptNextWithValue(value: Answerable<string | number>): Interaction {
         return Page.current().modalDialog().acceptNextWithValue(value)
-            .describedAs(d`#actor accepts next modal dialog window with value ${ value }`);
+            .describedAs(the`#actor accepts next modal dialog window with value ${ value }`);
     }
 
     /**
@@ -148,7 +148,7 @@ export abstract class ModalDialog implements Optional {
      */
     static dismissNext(): Interaction {
         return Page.current().modalDialog().dismissNext()
-            .describedAs(d`#actor dismisses next modal dialog window`);
+            .describedAs(the`#actor dismisses next modal dialog window`);
     }
 
     /**

package/src/screenplay/questions/Attribute.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, MetaQuestion, MetaQuestionAdapter, Optional, QuestionAdapter, UsesAbilities } from '@serenity-js/core';
-import { d, LogicError, Question } from '@serenity-js/core';
+import { d, LogicError, Question, the } from '@serenity-js/core';
 
 import { PageElement } from '../models';
 
@@ -99,8 +99,6 @@ export class Attribute<Native_Element_Type>
     extends Question<Promise<string>>
     implements MetaQuestion<PageElement<Native_Element_Type>, Question<Promise<string>>>, Optional
 {
-    private subject: string;
-
     /**
      * Instantiates a {@apilink Question} that uses
      * the {@apilink Actor|actor's} {@apilink Ability|ability} to {@apilink BrowseTheWeb} to retrieve
@@ -117,10 +115,10 @@ export class Attribute<Native_Element_Type>
         private readonly name: Answerable<string>,
         private readonly element?: QuestionAdapter<PageElement> | PageElement,
     ) {
-        super();
-        this.subject = element
-            ? d`${ name } attribute of ${ element }`
-            : d`${ name } attribute`
+        super(element
+            ? the`${ name } attribute of ${ element }`
+            : the`${ name } attribute`
+        );
     }
 
     /**
@@ -161,24 +159,9 @@ export class Attribute<Native_Element_Type>
      * @inheritDoc
      */
     isPresent(): QuestionAdapter<boolean> {
-        return Question.about(this.subject, async actor => {
+        return Question.about(this.toString(), async actor => {
             const attribute = await this.answeredBy(actor);
             return attribute !== null && attribute !== undefined;
         });
     }
-
-    /**
-     * @inheritDoc
-     */
-    describedAs(subject: string): this {
-        this.subject = subject;
-        return this;
-    }
-
-    /**
-     * @inheritDoc
-     */
-    toString(): string {
-        return this.subject;
-    }
 }

package/src/screenplay/questions/ComputedStyle.ts

@@ -105,8 +105,6 @@ 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
@@ -124,13 +122,11 @@ export class ComputedStyle<Native_Element_Type>
         private readonly element?: QuestionAdapter<PageElement<Native_Element_Type>> | PageElement<Native_Element_Type>,
         private readonly pseudoElement?: Answerable<string>,
     ) {
-        super();
-
-        this.subject = [
+        super([
             d`computed style property ${ name }`,
             pseudoElement && d`of pseudo-element ${ pseudoElement }`,
             element && d`of ${ element }`,
-        ].filter(Boolean).join(' ');
+        ].filter(Boolean).join(' '));
     }
 
     /**
@@ -188,19 +184,4 @@ export class ComputedStyle<Native_Element_Type>
 
         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/CssClasses.ts

@@ -1,5 +1,5 @@
-import type { Answerable,MetaQuestionAdapter, QuestionAdapter } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+import type { Answerable, MetaQuestionAdapter, QuestionAdapter } from '@serenity-js/core';
+import { Question, the } from '@serenity-js/core';
 
 import { PageElement } from '../models';
 
@@ -110,7 +110,7 @@ export class CssClasses {
      * @param pageElement
      */
     static of(pageElement: QuestionAdapter<PageElement> | PageElement): MetaQuestionAdapter<PageElement, string[]> {
-        return Question.about(d`CSS classes of ${ pageElement }`,
+        return Question.about(the`CSS classes of ${ pageElement }`,
             async actor => {
                 const element = await actor.answer(pageElement);
 

package/src/screenplay/questions/Selected.ts

@@ -1,5 +1,5 @@
 import type { Answerable, QuestionAdapter } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+import { Question, the } from '@serenity-js/core';
 
 import type { PageElement } from '../models';
 
@@ -67,7 +67,7 @@ export class Selected {
      *  A {@apilink PageElement} identifying the `<select>` element of interest
      */
     static valueOf(pageElement: Answerable<PageElement>): QuestionAdapter<string> {
-        return Question.about(d`value selected in ${ pageElement }`, async actor => {
+        return Question.about(the`value selected in ${ pageElement }`, async actor => {
             const element = await actor.answer(pageElement);
             const options = await element.selectedOptions();
 
@@ -126,7 +126,7 @@ export class Selected {
      *  A {@apilink PageElement} identifying the `<select>` element of interest
      */
     static valuesOf(pageElement: Answerable<PageElement>): QuestionAdapter<Array<string>> {
-        return Question.about(d`values selected in ${ pageElement }`, async actor => {
+        return Question.about(the`values selected in ${ pageElement }`, async actor => {
             const element = await actor.answer(pageElement);
 
             const options = await element.selectedOptions();
@@ -187,7 +187,7 @@ export class Selected {
      *  A {@apilink PageElement} identifying the `<select>` element of interest
      */
     static optionIn(pageElement: Answerable<PageElement>): QuestionAdapter<string> {
-        return Question.about(d`option selected in ${ pageElement }`, async actor => {
+        return Question.about(the`option selected in ${ pageElement }`, async actor => {
             const element = await actor.answer(pageElement);
 
             const options = await element.selectedOptions();
@@ -248,7 +248,7 @@ export class Selected {
      *  A {@apilink PageElement} identifying the `<select>` element of interest
      */
     static optionsIn(pageElement: Answerable<PageElement>): QuestionAdapter<Array<string>> {
-        return Question.about(d`options selected in ${ pageElement }`, async actor => {
+        return Question.about(the`options selected in ${ pageElement }`, async actor => {
             const element = await actor.answer(pageElement);
 
             const options = await element.selectedOptions();

package/src/screenplay/questions/Text.ts

@@ -1,5 +1,5 @@
 import type { Answerable, AnswersQuestions, MetaQuestionAdapter, QuestionAdapter } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+import { Question, the } from '@serenity-js/core';
 import { asyncMap } from '@serenity-js/core/lib/io';
 
 import type { PageElements } from '../models';
@@ -105,7 +105,7 @@ export class Text {
      * @param pageElement
      */
     static of(pageElement: QuestionAdapter<PageElement> | PageElement): MetaQuestionAdapter<PageElement, string> {
-        return Question.about(d`the text of ${ pageElement }`,
+        return Question.about(the`the text of ${ pageElement }`,
             async actor => {
                 const element = await actor.answer(pageElement);
 
@@ -130,14 +130,14 @@ export class Text {
     static ofAll(pageElements: Answerable<PageElement[]>): QuestionAdapter<string[]>
     static ofAll(pageElements: PageElements | Answerable<PageElement[]>): QuestionAdapter<string[]> {
         if (Question.isAMetaQuestion(pageElements)) {
-            return Question.about(d`the text of ${ pageElements }`,
+            return Question.about(the`the text of ${ pageElements }`,
                 textOfMultiple(pageElements),
                 (parent: Answerable<PageElement>) =>
                     Text.ofAll(pageElements.of(parent))
             );
         }
 
-        return Question.about(d`the text of ${ pageElements }`, textOfMultiple(pageElements));
+        return Question.about(the`the text of ${ pageElements }`, textOfMultiple(pageElements));
     }
 }
 

package/src/screenplay/questions/Value.ts

@@ -1,5 +1,5 @@
 import type { Answerable,MetaQuestionAdapter, QuestionAdapter } from '@serenity-js/core';
-import { d, Question } from '@serenity-js/core';
+import { Question, the } from '@serenity-js/core';
 
 import { PageElement } from '../models';
 
@@ -70,7 +70,7 @@ export class Value {
      * @param pageElement
      */
     static of(pageElement: QuestionAdapter<PageElement> | PageElement): MetaQuestionAdapter<PageElement, string> {
-        return Question.about(d`the value of ${ pageElement }`,
+        return Question.about(the`the value of ${ pageElement }`,
             async actor => {
                 const element = await actor.answer(pageElement);
                 return element.value();