About the problem that robot framework encounters CSS pseudo-element and cannot directly click the button

Question

I've encountered an issue with Robot Framework where I can't click a button because the CSS contains pseudo-elements which prevent direct clicks. Here's the HTML structure:

<div class="ui-dialog-test ui-widget-content ui-helper-test">
    ::before
    <div class="ui-dialog-button">
        <button type="button" class="ui-button ui-all ui-widget">OK</button>
        <button type="button" class="ui-button ui-all ui-widget">Cancel</button>
    </div>
    ::after
</div>

Upon inspecting the CSS in the browser developer mode, the styles for ::before and ::after are as follows:

[before]
content: "";
display: table;
border-collapse: collapse;

[after]
clear: both;
content: "";
display: table;
border-collapse: collapse;

I have tried the following methods, but all have failed:

1. Click Element xpath=//div[@class="ui-dialog-test"]/div/button[text()="OK"]
2. Click Element css:.ui-dialog-button > button.ui-button:contains('OK')
3. ${ok_button}= Get WebElement css:.ui-dialog-button > button.ui-button:nth-child(1)
   Execute JavaScript arguments[0].click(); ARGUMENTS ${ok_button}

Could anyone advise on the correct way to do this? Thank you.