playwright-fluent
Version:
Fluent API around playwright
100 lines (99 loc) • 5.71 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 page_actions_1 = require("../../../page-actions");
const dom_actions_1 = require("../../../dom-actions");
const is_handle_visible_1 = require("../../is-handle-visible");
const utils_1 = require("../../../../utils");
const is_handle_visible_in_viewport_1 = require("../../is-handle-visible-in-viewport");
describe('scroll to handle', () => {
let browser = undefined;
// eslint-disable-next-line @typescript-eslint/no-empty-function
beforeEach(() => { });
afterEach(async () => {
if (browser) {
await browser.close();
}
});
test('should scroll to 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, 'scroll-to-handle.test.html')}`;
await page.goto(url);
await (0, utils_1.sleep)(1000);
const selector = '#out-of-view-port';
const previousClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const previousViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
const handle = await page.$(selector);
const isSelectorVisibleBeforeScroll = await (0, is_handle_visible_in_viewport_1.isHandleVisibleInViewport)(handle, is_handle_visible_1.defaultVerboseOptions);
// When
await SUT.scrollToHandle(handle);
await (0, utils_1.sleep)(2000);
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const currentViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
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);
expect(previousClientRectangle.top).toBeGreaterThan(currentClientRectangle.top);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(previousViewportRectangle.pageTop).toBe(0);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(currentViewportRectangle.pageTop).toBeGreaterThan(1000);
});
test('should not scroll to a hidden selector - 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, 'scroll-to-handle.test.html')}`;
await page.goto(url);
await (0, utils_1.sleep)(1000);
const selector = '#hidden';
const handle = await page.$(selector);
const previousClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const previousViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
// When
await SUT.scrollToHandle(handle);
await (0, utils_1.sleep)(2000);
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const currentViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
// Then
expect(previousClientRectangle).toMatchObject(currentClientRectangle);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(previousViewportRectangle.pageTop).toBe(0);
expect(currentViewportRectangle).toMatchObject(previousViewportRectangle || {});
});
test('should scroll to a transparent selector - 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, 'scroll-to-handle.test.html')}`;
await page.goto(url);
await (0, utils_1.sleep)(1000);
const selector = '#transparent';
const handle = await page.$(selector);
const previousClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const previousViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
// When
await SUT.scrollToHandle(handle);
await (0, utils_1.sleep)(2000);
const currentClientRectangle = await (0, dom_actions_1.getClientRectangleOf)(selector, page);
const currentViewportRectangle = await (0, page_actions_1.getViewportRectangleOf)(page);
// Then
expect(previousClientRectangle.top).toBeGreaterThan(currentClientRectangle.top);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(previousViewportRectangle.pageTop).toBe(0);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(currentViewportRectangle.pageTop).toBeGreaterThan(1000);
});
});