DEV Community

Matthew McGarvey
Matthew McGarvey

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Finding Elements on Page

# `el` supports normal CSS selectors
el(".class")
el("#id")
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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!")
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)