Newbie question: session |> visit("/") doesn’t work

[Chrichton]

I am brand-new on wallaby.

It looked very nice to me, so I added it to my Phoenix-application, which uses Ecto.
I am using the chrome-driver.

I was able to create a feature test, which seems to start correctly. I see the chrome-icon inside my dock blink shortly.
The test without assertion passed.

But when I tried to find a css element, it told me, there was none visible.

** (Wallaby.QueryError) Expected to find 1, visible element that matched the css 'h1' but 0, visible elements were found.

 code: |> find(Query.css("h1", text: "Welcome"))
 stacktrace:
   (wallaby 0.29.1) lib/wallaby/browser.ex:956: Wallaby.Browser.find/2
   test/anamnesis_content_viewer/integration/index_page_test.exs:15: (test)

I used the take_snapshot function.
It showed a white, empty image.

I changed to a different route via visit().
But all routes returned the same empty snapshot image.

How can I find out, what’s going wrong.

I think, maybe I missed something when adding wallaby to my project.
Or could it be?: My Phoenix-App is running on port 4000. Do I have to specify the port somewhere?

here is my test

feature("foo", %{session: session}) do
session
|> visit("/")
|> take_screenshot()
|> find(Query.css("h1", text: "Welcome"))
end

[mhanberg]

Have you set your base_url?

I am on my phone and cannot easily link to it, but the information for the base url is in the README.

[Chrichton]

Hi Mitch
Yes, I set the base_url, BUT

in the meantime I created a new Phoenix demo-app without Ecto.
It worked instantly with Wallaby. 👍
I checked it’s base_url via IO.inspect and it was "http://localhost:4002"
I don’t understand why it isn’t port 4000, as the Phoenix-App uses this port. (http://localhost:4000)

I checked the base_url of my production-app and it was "http://localhost:4000"
I changed it to port 4002 and voila, it works

• now visit actually calls a real route
• take_screenshot produces a non empty screenshot
• find(Query.css) works

I have the following questions:

• Why is port 4002 correct for testing?
• I configured chrome with headless: false. That does work, but Chrome closes after 1 seconds. How can I configure Chrome to stay open longer?

Thank you for your help, Heiko

[mhanberg]

4002 is the default port in the test environment.

have you made sure that your server is enabled as well? https://github.com/elixir-wallaby/wallaby#phoenix

config :your_app, YourAppWeb.Endpoint, server: true

[Chrichton]

Hi Mitch.
yes, I configured the server correctly.

Maybe I formulated my second question not exactly enough.
Everything works correctly now.

Chrome closes after the test has run.
I would like Chrome to stay open, after the test has run.
That way, I could inspect the output directly inside Chrome in case of a failed test.

Is that possible?

best regards from Heiko

[mhanberg]

Is there a possibility to keep it open?

No.

typically what i do if i need to have the window stay open for a bit is add a long sleep or an IEx.pry

You can also configure wallaby to take screenshots on failure.

[Chrichton]

Thank you for your answers Mitch and for taking care of Wallaby.