Click checkbox within TR element - html

Question

I'd like to select the checkbox based on the user email. I try somethig like this but doesn't work: "InvalidStateError: An exception was thrown debugger eval code:1".
$x("//span[text()='my.user#mydomain.com']/parent::div/previousElementSibling::td");
What am I doing wrong? Thanks!
<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg">
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="my.user#mydomain.com" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">my.user#mydomain.com </span>
</div>
</td>

Answer 1

previousElementSibling is not a XPath selector but a property on a element: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
An almost similar selector for a XPath is the preceding-sibling selector. But that will return all the preceding siblings so you will have to maximize the result to 1 with the [1] selector:
/preceding-sibling::div[1]
And then you still need to only select the divs containing the checkbox class so you will need the [contains(#class, 'checkbox')] selector and select the input with the /input selector.
The complete selector for the checkbox then looks like this:
$x("//span[text()='my.user#mydomain.com']/parent::div/preceding-sibling::div[contains(#class, 'checkbox')][1]/input")
If however you are using document.evaluate instead of $x you will need to replace the text()='the text' selector with the contains(. ,'the text') selector because the text() selector does not work in the document.evaluate method.
The complete executable code snippet:
var doc = document.children[0].children[1];
var checkbox = document.evaluate(
"//span[contains(., 'my.user#mydomain.com')]/parent::div/preceding-sibling::div[contains(#class, 'checkbox')][1]/input",
doc,
null,
XPathResult.ANY_TYPE,
null
).iterateNext()
console.log(checkbox)
alert(checkbox)
<td class="col checkUser selection">
<div class="checkbox um-checkbox">
<input type="checkbox" value="option1">
<label data-select-checkbox="" data-ngretain="u-cd324c08-f215-5784-87b7-98944b18819f"></label>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails" title="My User" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="text-overflow " style="max-width: 90%;display: inline-block;">
<span class="first-name">My </span>
<span class="first-name">User </span>
</span>
<span>
<img style="height: 24px;width:24px;margin-left: 5px;" src="/Admin/img/admin-gray.svg">
</span>
</div>
</td>
<td class="col userData item-collapse item-top">
<div class="showUserDetails text-overflow" title="my.user#mydomain.com" data-id="u-cd324c08-f215-5784-87b7-98944b18819f">
<span class="first-name">my.user#mydomain.com </span>
</div>
</td>