playwright/xpath - How to get next element in dynamicaly list

Question

I'm out of ideas. I try get for example genere from this code. List items are generated dynamicaly if item has no information about something then section does not exist. I tring to find div with text "genere" and try to get text from next in h3 element. I use JS, Playwright, XPath. Example code:

<div class="infoItem">
    <h3 class="header">director</h3>
    <div class="info">John Doe</div>
    <h3 class="header">country</h3>
    <div class="info">DE</div>
    <h3 class="header">screenwriting</h3>
    <div class="info">John Doe</div>

    <!--[...]-->
    
    <h3 class="header">genere</h3>
    <div class="info">Comedy</div>
    <h3 class="header">premiere</h3>
    <div class="info">2019-02-18</div>
 </div>

Answer 1

You can get the h3 element below the genere text by using what playwright calls the selecting elements based on layout

page.locator('h3:below(:text("genere"))') //gets <h3 class="header">premiere</h3>