Cypress 中的页面对象模式？

Question

我想使用类似于 Selenium 等框架中存在的页面对象模式的工作流程。我想在我的 editSettings.spec.js 中使用我的 login.spec.js，因为它需要用户登录。

我如何在赛普拉斯中实现这一目标？我可以从一个测试文件中导出函数以在另一个文件中使用吗？

Answer 1

是的，赛普拉斯支持在您的 UI 中创建和重用操作的能力，例如以用户身份登录。

但是，Cypress 还允许您比用户更强大 控制浏览器的状态。

例如：我创建了一个测试，"user can log in with valid username and password"- Cypress 导航到登录页面，在用户字段中键入，在密码字段中键入并单击 "Log in" 按钮。 页面对象模式会让您在每个需要用户登录的测试（大多数测试）上重复使用此操作

赛普拉斯支持这个；然而，这比它必须的要慢 。导航到登录页面、输入信息、处理响应以及导航到被测页面需要花费大量时间。、Cypress 的 API 允许以下内容：

使用 cy.request() 使用登录凭据直接访问您的服务器。这不需要您的应用程序状态、无需在字段中键入内容、无需单击按钮或页面导向
您的网站使用的任何 cookies 都是自动设置的 ，或者您可以使用响应
将其设为自定义命令，在每次测试前调用它，然后砰的一声——您几乎立即生成了用户状态，最重要的是没有碎片

Answer 2

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

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

希望这对其他人有帮助。

Answer 3

在 fixtures 文件夹中创建一个 SearchProduct.js 文件（您可以在任何地方创建它）。然后在其中创建一个 class 并在其中定义所有方法，如下所示：

class ProductPage {
    getSearchClick() {
        return cy.get('.noo-search');
    }
    getSearchTextBox(){
        return cy.get('.form-control');
    }
    getProductsName() {
        return cy.get('.noo-product-inner h3');
    }
    getSelectSize() {
        return cy.get('#pa_size');
    }
    getSelectColor() {
        return cy.get('#pa_color');
    }
    getAddtoCartButton() {
        return cy.get('.single_add_to_cart_button');
    }
    }

export default ProductPage

创建 class 后，让我们将其导入到 command.js 文件中。之后，让我们创建一个它的新对象来访问上面commands.js.

中提到的所有方法

import ProductPage from '../support/PageObjects/ProductPage';

Cypress.Commands.add("selectProduct", (productName, size , color) => { 
    // Creating Object for ProductPage
    const productPage=new ProductPage();

    // Doing the search part for Shirts.
    productPage.getSearchClick().click()
    productPage.getSearchTextBox().type('Shirt');
    productPage.getSearchTextBox().type('{enter}')
    
    productPage.getProductsName().each(($el , index , $list) => {
        //cy.log($el.text());
        if($el.text().includes(productName)) {
            cy.get($el).click();
        }
    })

    // Selecting the size and color and then adding to cart button. 
    productPage.getSelectColor().select(color);
    productPage.getSelectSize().select(size);
    productPage.getAddtoCartButton().click();
 })

所以，这里实际上自定义命令的 class 正在导入和使用页面 class。此外，测试脚本将使用相同的 command.js 来执行所需的操作。因此，测试脚本仍然相同，如下所示：

// type definitions for Cypress object "cy"
// <reference types="cypress" />
 
describe('Cypress Page Objects and Custom Commands', function() {
    
    //Mostly used for Setup Part
    before(function(){
    cy.fixture('example').then(function(data)
    {
        this.data=data ;
    })
    })
    
    it('Cypress Test Case', function() {
  
    //Registration on the site
    cy.visit('https://shop.demoqa.com/my-account/');
    cy.get('#reg_username').type(this.data.Username);
    cy.get('#reg_email').type(this.data.Email);
    cy.get('#reg_password').type(this.data.NewPassword);
    cy.get('.woocommerce-Button').click();
 
    //Checking whether the Registration is successful and whether UserName is populated under login section
    cy.get('#username').should('have.value',this.data.Username);
    })
 
    // For Loop for Accessing productName array from Features File and Using the custom command
    this.data.productName.forEach(function(element){
        // Invoke the Custom command selectProduct
        cy.selectProduct(element[0],element[1],element[2]);
    })
})

也可以跳过 Command.js 文件，直接导入Test File中的class

为此请转到以下 link:

礼貌：https://softans.com/cypress-page-object-model/

Cypress 中的页面对象模式？

Page Object Pattern in Cypress?

e2e-testing

cypress