How to select an element that does not have any built-in selectors

If its surrounding elements are constant enough, you could use those for finding the element, e.g. locator('div#parent>div') or locator('div#parent>div').first()

If it's the only visible div within its level, you could consider the pseudo-css selector :active

@maq9329 Thank you, this does make sense and I will write this down for when I get to that portion of the interview. In the meantime, if you or anyone else comes up with alternative ways to accomplish this please let me know so I have as many options as possible when I get there

In some cases, if you have similar elements but you need to identify a specific one, you could also add your own classes to the element. I have a case where a form is saved and it shows a toast container telling the user that saving was (un)succesful. If I save many forms in a row quickly enough, Playwright can't tell the toast containers apart, so I resorted to marking seen toast containers with my own class .toast-seen

Like such:

.locator('.Toastify__toast-container')
        .locator('.Toastify__toast--default:not(.success-seen)');


verifySuccessToast = async () => {
        await expect(this.successToast()).toBeVisible();
        await this.successToast().evaluate(node => node.classList.add('success-seen'));
    };```

This is super interesting! I didn't know that you could add a class to it like that. Definitely writing this down!