NAR
Hello!
I’m new to JavaScript, so I might use wrong terminology, please bear with me 
I need to test a page that’s heavy on JavaScript. On loading the page the browser executes a JavaScript function that eventually loads a new form into the page using Ajax. Then I need to click on a button in the freshly loaded HTML code. I can run this in Chrome, I see that the loaded HTML is rendered and the button I need to click is rendered like this:
<div _ngcontent-c2="" class="checkout-header">
<!---->
<h1 _ngcontent-c2="" class="heading">
Foo bar baz
</h1>
<i _ngcontent-c2="" alt="X" class="close-button psi psi-times-v1 psi-hover"></i>
</div>
I have no control over this particular HTML code. I don’t quite understand why the <i> element is used, but the Developer tools in Chrome shows this is the element I need to click on. However, when I try to find this element using Wallaby, I can’t find it. This is the code I’m trying to use:
selector = "div.checkout-header > i"
button = Query.css(selector)
but the result is this
conditions: [at: :all, selected: :any, count: 1, text: nil, visible: true],
html_validation: nil,
method: :css,
result: [],
selector: "div.checkout-header > i"
}
I see in the screenshot that the downloaded HTML is rendered. What am I doing wrong? I also tried waiting:
selector = "div.checkout-header > i"
session
|> assert_has(Query.css(selector))
but that failed too:
** (Wallaby.ExpectationNotMetError) Expected to find 1, visible element that matched the css 'div.checkout-header > i' but 0, visible elements were found.
Where Next?
Trending in Questions
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
rsalgado
I don’t know if you figured it out, but as no one else has answered, I might take a stab at this.
I work on QA automation and, even though I haven’t used Elixir for that (thus have not used Wallaby) and have not worked on UI testing recently, maybe my prior experience with it might help here.
It seems that your code is not finding the element. If the selector is correct, then the issue is probably of timing. That happens a lot in UI tests when there’s content rendered dynamically (through JS) and it still isn’t loaded when you query it. My advice would be to:
$$("<your CSS selector>")for CSS selectors and$x("<your XPath selector>")for XPath.Browser.findorBrowser.retry, but I’m just guessing here.So far, that’s the most I can say with the current information I have on Wallaby and your problem.
Also, if you have the chance, see if you can use
IEX.pryto put a sort of “breakpoint” and do some trial-and-error without having to reload the browser and start from scratch every time.As for the
<i>element, some icon libraries (like FontAwesome) use those elements to put icons, usually with specific classes; not sure if that’s the case here.michallepicki
I think I can help with that: Wallaby is supposed to wait for the element to appear on the page. The
execute_queryfunction contains aBrowser.retrycall already: wallaby/lib/wallaby/browser.ex at main · elixir-wallaby/wallaby · GitHub and will try again until all validations pass (including number of elements we want to see) or until its timeout (3s by default but you can configure it: wallaby/lib/wallaby/browser.ex at main · elixir-wallaby/wallaby · GitHub ).@NAR You can try increasing the
). You could make a few versions of it, i.e. one that ignores query result and returns the parent, one that takes a function block to execute on the found element, and one that would return the found element. I’m curious what you end up with so please do share your findings or problems you stumble upon.
:max_wait_timeconfig value. (I think it would be cool to be able to tune it per query execution, we could look into adding support for that to Wallaby). Another thing you could do is have a custom helper for waiting that takes the timeout as an argument. You could useBrowser.execute_queryorBrowser.hasand/orBrowser.retryas its building blocks (or copy&paste&modify them to hack something togetherNAR
Hello!
Thanks for the answers. It turned out the problem was that the new HTML was loaded in an
iframe, so I needed to move the focus there usingfocus_frame. My test still fails occasionally, that:max_wait_timeoption should help with that.gabriel137
How you set the query param in focus_frame?