I am quite new in playwright and i cannot find solution for how to get parent of element? Here is what i have so far:
const deliveryItems = await page.locator('.js-delivery-container'); //Items
const deliveryMethod = deliveryItems.locator('input[value="50"]'); //input in items selected by value
const example_parent = await deliveryMethod.closest('.js-delivery-name'); //name what i want to check
await expect(example_parent).toHaveText('Osobní odběr'); //check if selected right delivery
But when i run it.. there is a Error what popup in console:
TypeError: deliveryMethod.closest is not a function
33 |
34 | const deliveryMethod = deliveryItems.locator('input[value="50"]');
> 35 | const example_parent = await deliveryMethod.closest('.js-delivery-name');
Can anyone explain me this? Thanks
My structure looks like this:
<div class="select-content-box js-delivery-container">
<div class="select-content delivery-icon-factory">
<div class="extended-title transport-icon js-delivery-name">Osobní odběr</div>
<div class="extended-price js-delivery-price"></div>
<div class="select-btn">
<label class="label toggle">
<input type="radio" name="radio-delivery" value="50">
<div class="toggle-control"></div>
</label>
</div>
<div class="cleaner"></div>
<div class="select-address" style=""></div>
</div>
</div>
The ElementHandle.closest() method you are trying does not exist in the API at the moment (or is not yet available in the Playwright version you use, I only found it in this discussion #6015). That's the reason for the error.
You want to find a connection between the input field based on its value (input[value="50"]) and the .js-delivery-name element which is not possible, or at least any .parentElement?.parentElement?.nextSibling?.nextSibling... structure would be extremely fragile, same applies to XPath axes (they are not even in child-ancestor relation here but a kinda "second niece/nephew-second aunt/uncle" relation).
I suggest the following. "Playwright can select elements based on the page layout. These can be combined with regular CSS for better results."
1-2.) desired name within + delivery items: using the child combinator and universal selector you can compose patterns that can grab your desired elements within a container element, e.g.: .js-delivery-container > * .js-delivery-name
3.) above this input: when you have the exact selector then you can grab it by finding the closest element matches another CSS selector query in specific directions with :above(), :below(), :near(), :left-of() and :right-of() methods, e.g. :above(input[value="50"]). As the docs says: "Matches elements that are above any of the elements matching the inner selector".
// delivery items desired name within above this input
// ______________________ __ _______________ ________________________
// | || || || |
const parent = page.locator('.js-delivery-container > * .js-delivery-name:above(input[value="50"])')
await expect(parent).toHaveText(/Osobní odběr/)
Note: Layout selectors use bounding client rect to compute the distance and relative position of the elements, so these above, below etc. directions are strictly meant for layout position and not for DOM ancestry.