README

以下是设置您的项目Cypress D10测试套件的说明，以及如何在Cypress中编写测试。

这些说明也可以在Confluence上找到。然而，这两个文档并未保持同步，此README应被视为最新版本。

最小设置

运行 composer require ubc-web-services/cypress-d10-test
按正常本地开发启动lando
在项目根目录下，运行 npm install --save-dev cypress && npm install --save-dev cypress-real-events（应至少为版本13，否则将提示更新）
要启动Cypress，运行 npx cypress open
如果提示，按照迁移步骤接受所有更改（这是如果已安装较旧的Cypress版本）
用cp -f vendor/ubc-web-services/cypress-d10-test/cypress.config.js .覆盖根目录下的当前cypress.config.js/cypress.json文件。
此时，我们不需要根目录下的cypress文件夹。要么删除该文件夹，要么将其重命名为cypress_custom，以便cypress.config.js可以识别其中的测试。
将cypress.config.js的baseUrl更改为lando站点的URL（例如https://exampleitubcca.lndo.site）

如何编写Cypress测试

一个好的基本教程可以在这里找到： https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test

Cypress已经提供了示例测试供参考：https://github.com/cypress-io/cypress-example-recipes

您还可以将vendor/ubc-web-services/cypress-d10-test/e2e中的测试作为编写自己测试的参考。

以下是一个简单的.cy.js文件示例

describe("[Generic] Test Suite - tests related to XYZ", () => {
    beforeEach(() => {
        cy.doLogin();	// triggers login custom helper function, which uses lando drush uli to login
        cy.visit('/admin/reports/dblog');
    })

    it("Checks that the title loaded (fails if whitescreen)", () => {
        // cy.get uses CSS selectors 
        cy.get('#block-gin-page-title').should('contain', 'Recent log messages');

        // using .contains() or .find() are also great ways to "grab hold" of an element, especially if it has bad selector options
        // Alternative approach
        cy.contains("Recent log messages").should("exist");
    })
})