Xpath: Getting preceding span element where a button contains specific text

Question

Trying to get the Button with span and text equals "Delete" as per below xpath selector for a later click

//text()='Delete'//preceding::span

But it does not work. Html is below. How do i get the preceding element for click?

<oj-button :class="[['button-' + actionButton.data.style]]" chroming="full" on-oj-action="[[(event) => { handleActionButtonItem(
                  properties.actionButtons.menuItemAction,
                  actionButton.data.action,
                  properties.details
                )}]]" class="button-warn oj-button oj-button-full-chrome oj-button-text-only oj-enabled oj-complete oj-default">

                <!--oj-bind-text value='[[actionButton.data.name]]'--><!--ko text:actionButton.data.name--><!--/ko--><!--/oj-bind-text-->
              <div style="display: none;"></div><button class="oj-button-button" aria-labelledby="_ojcustomelem2902|text"><div class="oj-button-label"><span><span class="oj-button-text" id="_ojcustomelem2902|text">Delete</span></span></div></button></oj-button>

Answer 1

If I understand you correctly, you are looking for something like

//button[.//span['Delete']]

Try it on your actual html and see if it works.

Answer 2

Something like this

//button[.//span[.='Delete']]

Or if that span always has class="oj-button-text"

//button[.//span[@class='oj-button-text' and .='Delete']]