LuckyFlow - The Basics

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

Navigation

# go to /users
visit Users::Index

# go to /users/:user_id with user credentials
visit Users::Show.with(current_user.id), as: current_user

Finding Elements on Page

# `el` supports normal CSS selectors
el(".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 that el 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 and el support a custom attribute called flow-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 using el or pass a CSS selector directly to click.

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

Filling Out Forms

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

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

Assertions

# expect the element to be displayed on the page
el("@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).should have_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.