Hello everyone! I was inspired to write this article by the fact that there’s no official documentation on pattern implementation in . You might find some articles online, but I find them imperfect - I’ve got a thing or two to add. Page Elements (PE) Cypress This one is not so well-known as , so you probably never heard about it before. Usually, being implemented in pair with , not separately. Page Object Model (POM) Page Elements Page Object Model WHAT’S PAGE ELEMENTS? is a test automation programming (or design) pattern. It’s built on top of (don’t repeat yourself) principle in software development. Page Elements (PE) DRY As it’s a design pattern and it’s not unique for every web automation tool, no wonder there are no official docs for that as well ☝️ Cypress Key concepts of are: PE A lot of elements in web applications are usually very similar, for example: Modal dialogs/windows. Forms. Cards Page Element is represented as a class. Sub-element (like button/input inside of a card) = DOM tree element, class attribute. Method = sequence of actions within the element. IMPLEMENTATION Here’s an with tests for . If you’ve been following my previous article, it’d probably worth to see what’s changed from there. example GitHub repo Swag Labs example web app take a look at the PR instead Create a folder for your , preferably name it and place it in your directory, like this: Page Elements elements cypress Create inside of folder - as the name says, it’s a top navigation bar from the app: navbar.js elements Create class inside of and fill it with selectors: Navbar navbar.js class Navbar {
  get menu() {return cy.get('#react-burger-menu-btn')}
  get cart() {return cy.get('#shopping_cart_container')}
}

export default new Navbar() Now there’s 2 ways to use such elements in your tests… A) Combine it with your - simply add it as a property for your page classes: Page Objects import Page from './page'
import Navbar from '../elements/navbar'

class ProductsPage extends Page {
  navbar = Navbar

  open() {
    return super.open('/inventory.html')
  }
}

export default new ProductsPage() And then call it in tests from the page: import ProductsPage from '../pages/products.page' // import page that includes page element
...

describe('Items', () => {
  ...

  it('Navigate to Cart from the navbar', () => {
    ProductsPage.navbar.cart.click() // click page elements on the page
    ...
  })
}) B) Use it directly in tests: import Navbar from '../elements/navbar' // import page element directly in tests
...

describe('Items', () => {
  ...

  it('Navigate to Cart from the navbar', () => {
    Navbar.cart.click() // interact with imported page element
  })
}) And that’s pretty much it ☝️ WHY SHOULD I USE IT? Big page objects Sometimes elements like navigation bar are big - they have more than a few sub-elements within (links, icons and etc). If you put too many stuff in your page objects - they get big soon, i.e.: class SomePage {
  selector1,
  ...
  selector9001

  method1,
  ...
  method1337
} Elements are not everywhere If we take the same website for example - you’ll see that navigation bar doesn’t appear on the page, but DO appear on other pages… SWAG LABS Sign In It means that there’s no place for navigation bar in our base page class (i.e. ), because it’d make this element available on ALL pages. page.js Page Elements pattern lets us add elements where we need them by simply calling stored class and not duplicating code. ONLY

2022 - HackerNoon Contributor of the Year - Automation

Nominated for 2022 - HackerNoon Contributor of the Year - Automation

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Writing Better Tests With Cypress' Page Elements

Too Long; Didn't Read

Dmitrii Bormotov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Writing Better Tests With Cypress' Page Elements

Too Long; Didn't Read

Dmitrii Bormotov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES