Answer

Retrieving DOM Elements with Playwright

In Playwright, you can use the evaluateHandle method to get the underlying DOM object from a locator. This method executes JavaScript code within the page context and retrieves a handle to the DOM element.

Here's how you can do it:

const locator = page.locator('your-locator');
const handle = await locator.evaluateHandle((element) => element);

Replace your-locator with your actual locator expression. The evaluateHandle method takes a function as its argument, which is executed in the browser's JavaScript environment. The function receives the matched element as its parameter and returns it.

Once you have the handle, you can perform various operations on it using Playwright's API. For example, you can interact with its properties or call methods on it.

Remember, when using evaluateHandle, Playwright automatically serializes and deserializes complex objects between Node.js and browser contexts. This means that even if your locator matches multiple elements, only their handles will be returned rather than their full representations.

So, with Playwright's evaluateHandle method and a locator expression, you can easily get handles to underlying DOM objects and perform further actions on them in your automation scripts.