How To Get The Element OuterHTML In Playwright

You may need to get the outerHTML of the element in your tests. This seems simple, but Playwright doesn’t have an outerHTML() function.

Let’s start with an example.

For this lesson, you must check if the popup window header has a font-sans property in its HTML code.

First of all, let’s check the source code of such an element

<h2 class="contextual-sign-in-modal__context-screen-title
font-sans text-xl text-color-text my-2 mx-4 text-center"
    id="public_profile_contextual-sign-in-modal-header">
    Sign in to view Eugene’s full profile
</h2>

This seems a pretty simple task since this element already has the id attribute we can select using the XPath attribute selection

const signInModalHeader = 
'//*[@id = "public_profile_contextual-sign-in-modal-header"]';

Feel free to check my How to master reliable XPath locators for your automated tests article, where you can find how to build reliable locators using XPath.