typescriptplaywrightplaywright-testplaywright-dotnet

In Playwright for Typescript, If it is possible to convert 'Page' to 'Document' or 'Element'


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;
        }
    }
}

PlayTestCode


Solution

  • You need to run CheckBoundary in the browser context using the evaluate function.

    var isExceedBoundary = await page.evaluate(CheckBoundary, elem);