我有一个类似数组的节点对象(它是一个轮播),它们的顺序是在每次页面刷新时随机生成的,剧作家发现所有元素都是可见的,但其中一些元素在视口之外(基于收到的错误) )。我需要确保在尝试单击该元素时该元素位于视口内,否则我会收到一条错误消息,指出该元素位于视口外。
如何确定类似数组对象的随机选取的节点元素是否确实在视口内?
Playwright 不幸的是 Puppeteer 中还没有像 isInterSectingViewport 这样的方法。(likethis)
所以 Playwright 的作者在 Slack 社区帮助我(你可以在官方网站上找到它)。
const result = await page.$eval(selector, async element => {
const visibleRatio: number = await new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
resolve(entries[0].intersectionRatio);
observer.disconnect();
});
observer.observe(element);
// Firefox doesn't call IntersectionObserver callback unless
// there are rafs.
requestAnimationFrame(() => {});
});
return visibleRatio > 0;
});
我使用这个方法的案例: 我想知道在单击某个元素后 - 我已经滚动到另一个元素。不幸的是,boundingBox 方法对我的情况没有帮助。
您也可以将此功能添加到我的 BasePage 类中
/**
* @returns {!Promise<boolean>}
*/
isIntersectingViewport(selector: string): Promise<boolean> {
return this.page.$eval(selector, async element => {
const visibleRatio: number = await new Promise(resolve => {
const observer = new IntersectionObserver(entries => {
resolve(entries[0].intersectionRatio);
observer.disconnect();
});
observer.observe(element);
// Firefox doesn't call IntersectionObserver callback unless
// there are rafs.
requestAnimationFrame(() => {});
});
return visibleRatio > 0;
});
}
附注 事实上,除了一行代码外,所有代码均取自GitHub Puppeteer
中 isInterSectingViewport 方法的实现使用 css 选择器检查元素是否在视口中:
import { test, expect, devices } from '@playwright/test'
const url = 'https://example.com'
const selector = 'h1'
test.use({
headless: false,
browserName: 'webkit',
...devices['iPhone 13 Mini'],
})
test('visibility', async ({ page }) => {
await page.goto(url)
const box = await page.locator(selector).boundingBox() // it contains x, y, width, and height only
let isVisible = await page.evaluate((selector) => {
let isVisible = false
let element = document.querySelector(selector)
if (element) {
let rect = element.getBoundingClientRect()
if (rect.top >= 0 && rect.left >= 0) {
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
if (rect.right <= vw && rect.bottom <= vh) {
isVisible = true
}
}
}
return isVisible
}, selector)
await expect(isVisible).toBeTruthy()
})
const firstId = "#someId";
// it happens that I am evaluating in a frame, rather than page
const result = await frame.evaluate((firstId) => {
// define a function that handles the issue
// returns true if element is within viewport, false otherwise
function isInViewport(el) {
// find element on page
const element = document.querySelector(el);
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <=
(window.innerWidth || document.documentElement.clientWidth)
);
};
return isInViewport(firstId);
}, firstId);
// back to node context
console.log(result);
除了cardinalX answer。 您可以使用 page.waitForFunction 创建辅助函数来等待元素出现在视口中
import { Page } from '@playwright/test';
export const waitToBeInViewport = async (
page: Page,
selector: string,
) => page.waitForFunction(async (selectorParam: string) => {
const element = document.querySelector(selectorParam);
const visibleRatio: number = await new Promise((resolve) => {
const observer = new IntersectionObserver((entries) => {
resolve(entries[0].intersectionRatio);
observer.disconnect();
});
observer.observe(element);
requestAnimationFrame(() => { });
});
return visibleRatio > 0; // where 0 - element has just appeared, and 1 - element fully visible;
}, selector);
Playwright 添加了一个 feature 来启用使用“expect”进行检查。使用信息如下:
(method) LocatorAssertions.toBeInViewport(options?: {
ratio?: number;
timeout?: number;
}): Promise<void>
Ensures the Locator points to an element that intersects viewport, according to the intersection observer API.
Usage
const locator = page.getByRole('button');
// Make sure at least some part of element intersects viewport.
await expect(locator).toBeInViewport();
// Make sure element is fully outside of viewport.
await expect(locator).not.toBeInViewport();
// Make sure that at least half of the element intersects viewport.
await expect(locator).toBeInViewport({ ratio: 0.5 });