Clicking an element with only class

Scriptable
1

I am trying to automate signing into a student pickup/dropoff webpage

I managed to get as far as loading the page, entering the pin and getting to where I select the student, but cannot get the next part where you click on the name (from inspection it looks like it its <h5 class="ChildSelectorTile__name">Student 1</h5>

problem is that the “link” only has a class…so I can’t seem to click on it, maybe its not loading all the way when I call evaluateJavaScript…I tried wrapping it in DomContentLoaded, but it seems to not find that element when I ask it to click…
another approach I tried too was that I noticed after I entered the pin (authenticated) and select the student’s name, the url changes to include the student number, but, calling loadURL on the second link takes me back to the authentication page…

I’m sure I’m missing something basic here…please help!

code of what I’ve done so far below - screenshots of the browser windows (drop-off and pickup appear after clicking on the student 1 name ( <h5 class="ChildSelectorTile__name">Student 1</h5>)

many thanks!!
Screen Shot 2021-10-09 at 2.16.04 AM|690x362

let url = "https://www.school.com/dd/HgqrwPCX78yViBi_-4gta?locale=en&school_id=123";
let url2 = "https://www.school.com/dd/HgqrwPCX78yViBi_-4gta?locale=en#/children/11111/classrooms/1111";
let wv = new WebView();
await wv.loadURL(url);
let js = 'var input = document.getElementById("pin"); input.value = "12345"; document.getElementsByName("commit")[0].click(); window.addEventListener("DOMContentLoaded", () => { document.querySelector(".h5 .ChildSelectorTile__name").click();});'
let runjs = await wv.evaluateJavaScript(js);
await wv.present();
Script.complete();
2

I’m not sure if hooking into DOMContentLoaded would work. I assume that the content has already loaded by the time you call evaluateJavascript.

Either way, have you tried click the <a> tag instead of the <h5>

// if there's only one <a> element in the document
document.querySelector('a').click()

or

// match an <a> element where the href attributes contains 11111
document.querySelector('a[href*="11111"]')
3

document.querySelector("h5.ChildSelectorTile__name") should get you the element with the student name (.h5 won’t work since h5 is the tag name rather than the class name of the element.)

4

thanks @BrianYu , unfortunately document.querySelector(“h5.ChildSelectorTile__name”) didn’t work, gave the error in screenshot attached

IMG_9906 2
IMG_9906 21197×1125 49.9 KB

@supermamon - that also gave an error for

document.querySelector('a[href*="11111"]')

Error: Failed evaluating JavaScript with error on line 1: SyntaxError: Unexpected number ‘11111’. Expected ‘)’ to end an argument list.