@serenity-js/playwright
Version:
Adapter that integrates @serenity-js/web with Playwright, enabling Serenity/JS reporting and using the Screenplay Pattern to write component and end-to-end test scenarios
198 lines • 6.62 kB
JavaScript
import { LogicError } from '@serenity-js/core';
import { PageElement, SelectOption } from '@serenity-js/web';
import * as scripts from '@serenity-js/web/scripts';
import { ensure, isDefined } from 'tiny-types';
/**
* Playwright-specific implementation of [`PageElement`](https://serenity-js.org/api/web/class/PageElement/).
*
* @group Models
*/
export class PlaywrightPageElement extends PageElement {
of(parent) {
return new PlaywrightPageElement(this.locator.of(parent.locator));
}
closestTo(child) {
return new PlaywrightPageElement(this.locator.closestTo(child.locator));
}
async enterValue(value) {
const text = [].concat(value).join('');
const element = await this.nativeElement();
return element.fill(text);
}
async clearValue() {
try {
const element = await this.nativeElement();
await element.fill('');
}
catch (error) {
throw new LogicError(`The input field doesn't seem to have a 'value' attribute that could be cleared`, error);
}
}
async click() {
const element = await this.nativeElement();
return element.click();
}
async doubleClick() {
const element = await this.nativeElement();
return element.dblclick();
}
async scrollIntoView() {
const element = await this.nativeElement();
return element.scrollIntoViewIfNeeded();
}
async hoverOver() {
const element = await this.nativeElement();
return element.hover();
}
async rightClick() {
const element = await this.nativeElement();
return element.click({ button: 'right' });
}
async selectOptions(...options) {
const element = await this.nativeElement();
const optionsToSelect = options.map(option => ({
value: option.value,
label: option.label,
}));
await element.selectOption(optionsToSelect);
}
async selectedOptions() {
const element = await this.nativeElement();
/* c8 ignore start */
const options = await element.locator('option').evaluateAll((optionNodes) => optionNodes.map((optionNode) => {
return {
selected: optionNode.selected,
disabled: optionNode.disabled,
label: optionNode.label,
value: optionNode.value,
};
}));
/* c8 ignore stop */
return options.map(option => new SelectOption(option.label, option.value, option.selected, option.disabled));
}
async dragTo(destination) {
const elementBeingDragged = await this.nativeElement();
const destinationElement = await destination.nativeElement();
// Use force: true to bypass actionability checks on the target element.
// This is necessary for drop zones that dynamically enable pointer-events
// only when a drag operation is in progress.
await elementBeingDragged.dragTo(destinationElement, { force: true });
}
async attribute(name) {
const element = await this.nativeElement();
return element.getAttribute(name);
}
async text() {
const element = await this.nativeElement();
return element.innerText();
}
async value() {
const element = await this.nativeElement();
return element.inputValue();
}
async html() {
const element = await this.nativeElement();
return element.evaluate(nativeElement => nativeElement.outerHTML);
}
async switchTo() {
try {
const nativeLocator = await this.nativeElement();
const element = await nativeLocator.elementHandle();
const frame = await element.contentFrame();
if (frame) {
const locator = this.locator;
await locator.switchToFrame(nativeLocator);
return {
switchBack: async () => {
await locator.switchToParentFrame();
}
};
}
/* c8 ignore start */
const previouslyFocusedElement = await nativeLocator.evaluateHandle((domNode) => {
const currentlyFocusedElement = document.activeElement;
domNode.focus();
return currentlyFocusedElement;
});
/* c8 ignore stop */
return new PreviouslyFocusedElementSwitcher(previouslyFocusedElement);
}
catch (error) {
throw new LogicError(`Couldn't switch to page element located ${this.locator}`, error);
}
}
async isActive() {
try {
const element = await this.nativeElement();
return element.evaluate(domNode => domNode === document.activeElement);
}
catch {
return false;
}
}
async isClickable() {
try {
const element = await this.nativeElement();
await element.click({ trial: true });
return true;
}
catch {
return false;
}
}
async isEnabled() {
try {
const element = await this.nativeElement();
return element.isEnabled();
}
catch {
return false;
}
}
async isSelected() {
try {
const element = await this.nativeElement();
// works for <option />
const selected = await element.getAttribute('selected');
if (selected !== null) {
return true;
}
// works only for checkboxes and radio buttons, throws for other elements
return await element.isChecked();
}
catch {
return false;
}
}
async isVisible() {
try {
const element = await this.nativeElement();
const isVisible = await element.isVisible();
if (!isVisible) {
return false;
}
return await element.evaluate(scripts.isVisible);
}
catch {
return false;
}
}
}
/**
* @private
*/
class PreviouslyFocusedElementSwitcher {
node;
constructor(node) {
this.node = node;
ensure('DOM element', node, isDefined());
}
async switchBack() {
/* c8 ignore start */
await this.node.evaluate((domNode) => {
domNode.focus();
}, this.node);
/* c8 ignore stop */
}
}
//# sourceMappingURL=PlaywrightPageElement.js.map