Parent Elements | Bondar Academy

Lesson Summary

This lesson focuses on the concept of parent elements and how to effectively locate child elements using the Playwright framework. Key Concepts Locking in Parent Elements: Instead of using indexes to find child elements, you can lock onto a unique parent element to improve stability and resilience against DOM changes. Using Unique Identifiers: Identify parent elements by unique headers or other distinct properties within the element. Methods for Locating Elements Locator Method: Use the second argument in the locator method, such as has text or has locator , to specify the unique parent element. Filter Method: An alternative to the locator method, filter can achieve the same results by applying multiple filters to narrow down the search. Examples To find a button within a form: const button = page.locator('nbcard', { hasText: 'Sign In' }).getByRole('button'); For more complex scenarios, you can apply multiple filters: const form = page.locator('nbcard').filter({ has: 'checkbox' }).filter({ hasText: 'Sign In' }); Traveling Up the DOM To navigate to a direct parent element, use: const parent = locator('.').locator('..'); This allows you to find child elements from the identified parent. In summary, this lesson emphasizes the importance of using unique identifiers and filtering methods to enhance the reliability of element selection in Playwright.