Page Object Pattern in Cypress?

Question

I want to use a workflow similar to the Page Object Pattern that exists in frameworks like Selenium. I want to use my login.spec.js in my editSettings.spec.js, because it requires a user to be logged in.

How do I achieve this in Cypress? Can I export a function from one test file to use in another?

Answer 1

Yes, Cypress supports the ability to create and reuse actions in your UI, such as logging in as a user would.

However, Cypress also allows you to control the state of the browser more powerfully than a user would.

For example: I create a test that a "user can log in with valid username and password"- Cypress navigates to the login page, types in the user field, types in the password field and clicks the "Log in" button. The Page Object Pattern would have you reuse this action on every test that requires a user to be logged in (most of the tests)

Cypress supports this; however, this is slower than it has to be. It takes a considerable amount of time to navigate to a login page, type in the information, handle the response, and navigate to the page under test. Instead, Cypress's API allows the following:

• use cy.request() to directly hit your server with the login credentials. This requires no state of your app, no typing in fields, no clicking buttons, or page directs
• Any cookies your site uses are automatically set, or you can set localStorage using the response
• Make this a custom command, call it before every test, and boom- you've generated your user's state almost instantly and most importantly flake-free

Answer 2

我实际上想出了这两个示例，一个使用 JavaScript，另一个使用 Typescript。

https://github.com/antonyfuentes/cypress-typescript-page-objects https://github.com/antonyfuentes/cypress-javascript-page-objects

希望这对其他人有所帮助。