@serenity-js/web
Version:
Serenity/JS Screenplay Pattern library offering a flexible, web driver-agnostic approach for interacting with web-based user interfaces and components, suitable for various testing contexts
161 lines • 6.35 kB
JavaScript
;
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 [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
*/
class ComputedStyle extends core_1.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([
(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(' '));
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 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
* - [`MetaQuestion`](https://serenity-js.org/api/core/interface/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);
}
}
exports.ComputedStyle = ComputedStyle;
//# sourceMappingURL=ComputedStyle.js.map