I have a HTML element:
<div class="L6SDZKszCG_ZE8mz8YoU A5Cr6bSu9aHPbpHz2CJD" data-test-id="test-element-table-row">
<div class="uR__axC81ElKcEfLKwNQ">
<div class="nTODXyNgcTJM6eGt3_9B">
<img data-test-id="thumbnail-image"
src="data:image/jpeg;base64,/9j/someBase64Line"
alt="Some Output"/>
<div class="jDvpilNE5rp5IbTvzosR">00:00</div>
</div>
<div class="UQumEmFQetFjm9i8pajl">
<div class="T32Zz26iJTmFPm3QCP2y">
<div class="JmXuiR3SP1pqGA0QKrsV">test element 1</div>
</div>
<div class="v192ycS57h4qcwn8dB4k">
<div class="JmXuiR3SP1pqGA0QKrsV">Text1</div>
</div>
<div class="KdcP4eejotpiqTJfD0Ee">
<div class="JmXuiR3SP1pqGA0QKrsV">Text2</div>
</div>
</div>
<div class="k2YcTO_adf66wXfntaUO">
<div class="k2YcTO_adf66wXfntaUO">
<img src="././file/929cd3158fc3b848a1e9.svg"
alt="Primary Icon">
<div class="_3TsZ4BgwHNiRL8pA7Bs">
<div class=""/>
<div class="e3s4o2xP55M4yZYLaQh6"/>
</div>
</div>
</div>
</div>
and I’ve found out a way to get a locator for the element with data-test-id=’thumbnail-image’, but in relation to the element that contains text ‘test element 1’, which is:
public getThumbnailForTableRowName(tableRowName: string): Locator {
const thumbnailLocator = this.page.getByTestId(`test-element-table-row`)
.getByText(tableRowName, { exact: true })
.locator(`xpath=../../..`)
.getByTestId(`thumbnail-image`)
return thumbnailLocator;
}
I have a feeling that it’s not optimal and out of good practices though. Is there a better way to get this locator using Playwright locator methods?