My Stuff

Cypress on Rails

I have recently come across cypress which is an improved way of doing end to end testing, which in my opinion provides many things that have been lacking in this area for a while now. If you have not heard of cypress before I suggest you check it at https://www.cypress.io/ before reading further.

That said though when using it for Rails end to end testing it still feels a bit clanky due to the separation of data setup from the test code and thus having to hop between files to understand the full context of the test. In capybara, RSpec and FactoryBot, you could write tests like this:

RSpec.describe 'Searching for a post', type: :feature do
  before do
    # sets minimum requirements to have the site functional but not specific to the test at hand
    prepare_site
  end

  it 'can be found using the main search bar' do
    # Data setup
    create(:post, title: 'Cypress on Rails')
    create_list(:post, 10)

    # test code
    visit '/'
    fill_in 'Search', with: 'Cypress on Rails'
    expect(page).to have_content('Search Results')
    expect(page).to have_content('Cypress on Rails')
  end
end

These kind of specs are great to read and understand because all the key information is visible within the file itself.

I have come across a gem called cypress-on-rails which I really liked but it did not feel quite right, which I have forked in the meantime and modified heavily. With the modified version I can write my cypress specs to look like this:

describe('Searching for a post', function() {
  beforeEach(function() {
    // sets minimum requirements to have the site functional but not specific to the test at hand
    cy.app('prepare_site')
  });

  it('can be found using the main search bar', function() {
    // Data Setup
    cy.appFactories([
      ['create', 'post', {title: 'Cypress on Rails'} ],
      ['create_list', 'post', 10]
    ])

    // test code
    cy.visit('/')
    cy.get('[data-cy="search_input"]').type('Cypress on Rails')
    cy.contains('Search Results')
    cy.contains('Cypress on Rails')
  })
})

If you like the look of that why not give it a try yourself (https://github.com/grantspeelman/cypress-on-rails) and let me know.

I am hoping to get some of the changes back into the main gem, so continue to watch this space.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s