8.3Chaining Locators

Chaining scopes a locator within another locator — like finding an element inside a container.

// Find the sidebar, then find a link inside it
const sidebar = page.getByRole('navigation', { name: 'Sidebar' });
await sidebar.getByRole('link', { name: 'Settings' }).click();

// Find a specific card, then interact with elements inside
const productCard = page.getByTestId('product-card').filter({ hasText: 'Laptop' });
await productCard.getByRole('button', { name: 'Add to Cart' }).click();
const price = await productCard.getByTestId('price').textContent();