Set Safari Field to Text fails

I am trying to automate a fairly simple website (http://liarspoker.azurewebsites.net). I've enabled Keyboard Maestro and Keyboard Maestro Engine to control Safari, and I've set Safari to "Allow JavaScript from Apple Events".

I've added the "Set Safari Field to Text" action to my macro, but when I select the "Safari" dropdown in this macro it says "No Fields Found". It defaults to "document.forms[0][0]", which fails when trying to execute the macro:

2022-02-23 06:12:08 Action 784 failed: Set Safari Field failed to set document.forms[0][0]
2022-02-23 06:12:08 Set Safari Field failed to set document.forms[0][0] in macro “Liar's Poker for SHIELD” (while executing Set Safari Field “document.forms[0][0]” to Text).

I've also tried manually setting the "Set field" value to //INPUT[@I'd="groupTextBox"] since I can inspect the source and see the I'd of the field I'm trying to set. This also fails:

2022-02-23 06:09:51 Set Safari Field failed to set //INPUT[@I'd="groupTextBox"] in macro “Liar's Poker for SHIELD” (while executing Set Safari Field “//INPUT[@I'd="groupTextBox"]” to Text).

The initial DOM for this site seems pretty simple:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Liar&#39;s Poker</title>
    <link href="/Content/Site.css" rel="stylesheet" />
</head>
<body>
    <div class="container body-content">
        

<div class="container notReady">
    
    <h1>Liar's Poker.</h1>

    <div class="toolbarContainer">
        <div class="groupContainer">
            <input type="text"
                   I'd="groupTextbox"
                   placeholder="Your Team"
                   list="availableGroupListbox"
                   autocomplete="off" />
            <datalist I'd="availableGroupListbox"></datalist>
        </div>

Any thoughts?

Can you try a pause action/pause until action after 'open url' action because the subsequent action is executed before the browser get to load the site.

This happens even when I already have the browser window open, so the site is not loading, it's already there. But for grins I added the following with no change in the outcome:

I assume that you have that expression working in web console , can you replace Set Field action with Execute JavaScript In Browser action ?

Nope, I don't have it working in console. The documentation for "Set field" doesn't really state what syntax is allowed there, the document.forms[0][0] is what is there by default and the //INPUT variation I tried based on looking at another page where keyboard maestro gave me some options.

But following this lead, I developed the following selector which can select the element in the console, but using it in my macro is still not successful.

document.getElementById("groupTextbox")

2022-02-23 07:30:10 Set Safari Field failed to set document.getElementById("groupTextbox")
<input type="text" id="groupTextbox" placeholder="Your Team" list="availableGroupListbox" autocomplete="off">
document.getElementById("groupTextbox") in macro “Liar's Poker for SHIELD” (while executing Set Safari Field “document.getElementById("groupTextbox")
<input type="text" id="groupTextbox" placeholder="Your Team" list="availableGroupListbox" autocomplete="off">

Ultimately, I succeeded by not using the set field action, which feels a bit more clunky, but it works:

image

document.querySelector("#groupTextbox").value = 'nuts'

See this also:

Macro: Pause Until Web Page Element Exists [Example]