playwright-fluent
Version:
Fluent API around playwright
149 lines (148 loc) • 8.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const path = tslib_1.__importStar(require("path"));
const playwright_1 = require("playwright");
const SUT = tslib_1.__importStar(require("../index"));
const dom_actions_1 = require("../../../dom-actions");
const is_handle_visible_1 = require("../../is-handle-visible");
const hover_on_handle_1 = require("../hover-on-handle");
const inject_cursor_1 = require("../../../dom-actions/inject-cursor");
const is_handle_visible_in_viewport_1 = require("../../is-handle-visible-in-viewport");
describe('hover on handle', () => {
let browser = undefined;
// eslint-disable-next-line @typescript-eslint/no-empty-function
beforeEach(() => { });
afterEach(async () => {
if (browser) {
await browser.close();
}
});
test('should hover on a selector that is out of viewport - chromium', async () => {
// Given
browser = await playwright_1.chromium.launch({ headless: true });
const browserContext = await browser.newContext({ viewport: null });
const page = await browserContext.newPage();
await (0, dom_actions_1.showMousePosition)(page);
const url = `file:${path.join(__dirname, 'hover-on-handle.test.html')}`;
await page.goto(url);
const selector = '#out-of-view-port';
const handle = await page.$(selector);
const isSelectorVisibleBeforeScroll = await (0, is_handle_visible_in_viewport_1.isHandleVisibleInViewport)(handle, is_handle_visible_1.defaultVerboseOptions);
const options = {
...hover_on_handle_1.defaultHoverOptions,
};
// When
await SUT.hoverOnHandle(handle, selector, page, options);
const isSelectorVisibleAfterScroll = await (0, is_handle_visible_in_viewport_1.isHandleVisibleInViewport)(handle, is_handle_visible_1.defaultVerboseOptions);
// Then
expect(isSelectorVisibleBeforeScroll).toBe(false);
expect(isSelectorVisibleAfterScroll).toBe(true);
const mousePositionClientRectangle = await (0, dom_actions_1.getClientRectangleOf)('playwright-mouse-pointer', page);
const mouseX = mousePositionClientRectangle.left + mousePositionClientRectangle.width / 2;
const mouseY = mousePositionClientRectangle.top + mousePositionClientRectangle.height / 2;
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const expectedX = currentClientRectangle.left + currentClientRectangle.width / 2;
const expectedY = currentClientRectangle.top + currentClientRectangle.height / 2;
expect(Math.abs(mouseX - expectedX)).toBeLessThanOrEqual(1);
expect(Math.abs(mouseY - expectedY)).toBeLessThanOrEqual(1);
});
test('should throw when selector is hidden - chromium', async () => {
// Given
browser = await playwright_1.chromium.launch({ headless: true });
const browserContext = await browser.newContext({ viewport: null });
const page = await browserContext.newPage();
await (0, dom_actions_1.showMousePosition)(page);
const url = `file:${path.join(__dirname, 'hover-on-handle.test.html')}`;
await page.goto(url);
const selector = '#hidden';
const handle = await page.$(selector);
const options = {
...hover_on_handle_1.defaultHoverOptions,
timeoutInMilliseconds: 1000,
};
// When
// Then
const expectedError = new Error("Cannot hover on '#hidden' because this selector is not visible");
await SUT.hoverOnHandle(handle, selector, page, options).catch((error) => expect(error).toMatchObject(expectedError));
});
test('should throw when selector is always moving - chromium', async () => {
// Given
browser = await playwright_1.chromium.launch({ headless: true });
const browserContext = await browser.newContext({ viewport: null });
const page = await browserContext.newPage();
await (0, dom_actions_1.showMousePosition)(page);
const url = `file:${path.join(__dirname, 'hover-on-handle.test.html')}`;
await page.goto(url);
const selector = '#moving';
const handle = await page.$(selector);
const options = {
...hover_on_handle_1.defaultHoverOptions,
timeoutInMilliseconds: 500,
};
// When
// Then
const expectedError = new Error("Cannot hover on '#moving' because this selector is always moving");
await SUT.hoverOnHandle(handle, selector, page, options).catch((error) => expect(error).toMatchObject(expectedError));
});
test('should wait for selector to stop moving - chromium', async () => {
// Given
browser = await playwright_1.chromium.launch({ headless: true });
const browserContext = await browser.newContext({ viewport: null });
const page = await browserContext.newPage();
await (0, dom_actions_1.showMousePosition)(page);
const url = `file:${path.join(__dirname, 'hover-on-handle.test.html')}`;
await page.goto(url);
const selector = '#moving';
const handle = await page.$(selector);
// When
const options = {
...SUT.defaultHoverOptions,
verbose: false,
};
await SUT.hoverOnHandle(handle, selector, page, options);
// Then
const mousePositionClientRectangle = await (0, dom_actions_1.getClientRectangleOf)('playwright-mouse-pointer', page);
const mouseX = mousePositionClientRectangle.left + mousePositionClientRectangle.width / 2;
const mouseY = mousePositionClientRectangle.top + mousePositionClientRectangle.height / 2;
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const expectedX = currentClientRectangle.left + currentClientRectangle.width / 2;
const expectedY = currentClientRectangle.top + currentClientRectangle.height / 2;
expect(Math.abs(mouseX - expectedX)).toBeLessThan(3);
expect(Math.abs(mouseY - expectedY)).toBeLessThan(3);
});
test('should hover on a selector that is inside an iframe - chromium', async () => {
// Given
browser = await playwright_1.chromium.launch({ headless: true });
const browserContext = await browser.newContext({ viewport: null });
const page = await browserContext.newPage();
await (0, dom_actions_1.showMousePosition)(page);
const url = `file:${path.join(__dirname, 'hover-on-handle.test.html')}`;
await page.goto(url);
const frameSelector = 'iframe';
const frameHandle = await page.$(frameSelector);
const frame = await (frameHandle === null || frameHandle === void 0 ? void 0 : frameHandle.contentFrame());
await (0, inject_cursor_1.injectCursor)(frame);
const selector = '#inside-iframe';
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const handle = await frame.$(selector);
const options = {
...hover_on_handle_1.defaultHoverOptions,
};
// When
await SUT.hoverOnHandle(frameHandle, frameSelector, page, options);
await SUT.hoverOnHandle(handle, selector, frame, options);
const isSelectorVisibleAfterScroll = await (0, is_handle_visible_in_viewport_1.isHandleVisibleInViewport)(handle, is_handle_visible_1.defaultVerboseOptions);
// Then
// expect(isSelectorVisibleBeforeScroll).toBe(false);
expect(isSelectorVisibleAfterScroll).toBe(true);
const mousePositionClientRectangle = await (0, dom_actions_1.getClientRectangleOf)('playwright-mouse-pointer', frame);
const mouseX = mousePositionClientRectangle.left + mousePositionClientRectangle.width / 2;
const mouseY = mousePositionClientRectangle.top + mousePositionClientRectangle.height / 2;
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, frame);
const expectedX = currentClientRectangle.left + currentClientRectangle.width / 2;
const expectedY = currentClientRectangle.top + currentClientRectangle.height / 2;
expect(Math.abs(mouseX - expectedX)).toBeLessThanOrEqual(1);
expect(Math.abs(mouseY - expectedY)).toBeLessThanOrEqual(1);
});
});