I am try to traverse the Dom Tree structure to determine whether each element exceeds the boundary of its parent element with Playwright Typescript.
But seems that I can't use "Document" directly to traverse the dom tree, do we have a way to mapping the 'Page' to 'Document' or 'Element', so that I can make some complex logical judgments based on the 'Document' or 'Element'.
Or is there a way for Playwright to check if each element on a page is exceeds the boundary of its parent element?
Below is the code being used for the test:
import { test, expect, type Page } from '@playwright/test';
import { getUrl } from '../test-config';
test.beforeEach(async ({ page }) => {
const url = getUrl()
await page.goto(url);
});
test.describe('TextExceedBoundary', () => {
test('text should not exceedboundary', async ({ page }) => {
// do we have a way to mapping the 'Page' to 'Document'?
var elem = document.querySelector(".select");
// TODO:Traverse DOM tree and call CheckBoundary function for each element
if (elem != null)
{
var isExceedBoundary = CheckBoundary(elem);
await expect(isExceedBoundary).toEqual(true);
}
});
})
// check if element exceeds the boundary of its parentElement.
function CheckBoundary(elem: Element) {
var container = elem.parentElement;
if (container != null)
{
var e = elem?.getBoundingClientRect();
var c = container?.getBoundingClientRect();
if(e.top < c.top || e.left < c.left || e.right > c.right || e.bottom > c.bottom)
{
return false;
}
else
{
return true;
}
}
}
You need to run CheckBoundary
in the browser context using the evaluate
function.
var isExceedBoundary = await page.evaluate(CheckBoundary, elem);