LuckyFlow is the browser-based testing library forLucky. It uses headless Chrome to test your web-app as close to actual users would as possible.

Navigation

# go to /usersvisitUsers::Index# go to /users/:user_id with user credentialsvisitUsers::Show.with(current_user.id),as:current_user

Finding Elements on Page

# `el` supports normal CSS selectorsel(".class")el("#id")

You can also select elements by passing in text. This is helpful when there are multiple elements with the same selector but they are distinguished by their text.

el(".list-item",text:"Item 123")

Keep in mind thatel is lazy so an error won't happen if you try to find an element that doesn't exist until you try to use the result.

Note:flow-id

Beyond CSS selectors, LuckyFlow andel support a custom attribute calledflow-id. This is to allow selecting elements to be more specific and less susceptible to test breakage.

# notice the usage of `@` to reference a `flow-id`el("@custom-flow-id")

Clicking Links

There are two ways to click an element. You can select it usingel or pass a CSS selector directly toclick.

el("@my-link").clickclick("@my-link")

Filling Out Forms

LuckyFlow provides a nice integration withAvram, Lucky's ORM, to make filling out forms easy.

fill_formCreateUser,name:"John Doe",email:"john@example.com"

Assertions

# expect the element to be displayed on the pageel("@custom-flow-id).should be_on_page# expect the current path to match# self is weird here because I have been showing# all the code as if it was inside a Flow# (more about that in a future post)self.should have_current_path(Users::Index)el("@custom-flow-id).shouldhave_text("Hello, world!")

In future posts, I want to go more in-depth on LuckyFlow and show how I use it to write clean specs.