[Bug] Cannot find LWCs with selectors that include an attribute filter

[pozil]

Actual behavior

UTAM is unable to find LWCs with a CSS attribute filter selector like lightning-input[type='search']. This issue is specific to LWCs, regular elements can be selected with attribute filters.

• [ ] Unable to compile a Page Object
• [ ] Invalid generated code
• [x] Runtime error

What is your expected behavior?

We should be able to select LWCs with attribute filters like any elements.

Steps to reproduce

Starting from a clean clone of the utam-js-recipes repo, follow these steps:

1. Edit force-app/main/default/lwc/wireGetObjectInfo/__utam__/wireGetObjectInfo.utam.json and change line 17 to

   "css": "lightning-button[label='Get Object Info']"

   Notice the attribute filter that we added to search for a specific label.

2. Recompile the page objects: yarn build

3. Run the scratch org tests: yarn test --spec force-app/test/sfdx-scratch-org.spec.js

Notice that the wire test is now failing with this error:

Error: Can't find element with locator 'lightning-button[label='Get Object Info']' inside its scope shadow root within timeout 0ms.

Environment

• Node.js: v14.15.4
• OS: macOs X
• Browser: Chrome
• Browser Version: v98.0.4758.48

[lizaiv77]

@pozil My apologies for the delay, at the moment unable to create scratch org (asking for help in various slack channels) and check UI. If you try $$("lightning-button[label='Get Object Info']") in browser console, does it find the element? Can you inspect the element and post elements tree starting from WireGetObjectInfo root?

It just seems weird that something like that would be UTAM related issue. Also feel free to reach out in slack, jump on the call and investigate if it's blocking you.

[lizaiv77]

Ok, so I finally got scratch org working and now I'm confused about what are you trying to do @pozil. Element "lightning-button" does not have a label, it does not have any attributes in fact, so selector with label attribute or any other attribute does not work and should not work. It would work only if HTML was <lightning-button label='Get Object Info'>...<lightning-button>

From console selector with label attribute returns nothing:

Element inspection:

Perhaps I'm missing something and you modified UI? Again pls feel free to ping me in slack with additional questions.

[pozil]

Sorry, that's my bad, you have the right code. I was looking at the source code in the repo when I built my UTAM test and I was making the bad assumption that the LWC template would also have the same attributes but as you pointed out the actual code in the page doesn't have the attribute.

<lightning-button label="Get Object Info" onclick={handleBtnClick}></lightning-button>

Thanks for helping and figuring it out.