关于 Cypress 的启动和 cy.visit 的调试

npx 是 npm 自带的命令行工具:

关于 Cypress 的启动和 cy.visit 的调试_第1张图片

在项目根目录下,使用命令行 npx cypress open 启动:

关于 Cypress 的启动和 cy.visit 的调试_第2张图片

也可以利用 yarn 启动:yarn run cypress open

或者是直接执行 node_modules bin 文件夹下的二进制命令。

关于 Cypress 的启动和 cy.visit 的调试_第3张图片

这样就可以成功启动 Cypress Launchpad:
关于 Cypress 的启动和 cy.visit 的调试_第4张图片

package.json 添加如下的 script:

"scripts": {
    "cypress:open": "cypress open"
  }

然后可以用如下的命令启动:

npm run cypress:open

npm install 安装完毕后,工程目录下有个 cypress\integration 文件夹,里面有很多 sample 文件。

关于 Cypress 的启动和 cy.visit 的调试_第5张图片

每个 test 一开始都是一个 blank state,因此需要在 beforeEach 函数调用里进行初始化。
关于 Cypress 的启动和 cy.visit 的调试_第6张图片

在这个 spec 执行的时候,cy 为什么就可用了?

关于 Cypress 的启动和 cy.visit 的调试_第7张图片

单步调试 todo.spec.js,在 webpack:// 文件夹下:

关于 Cypress 的启动和 cy.visit 的调试_第8张图片

具体的实现位置?

关于 Cypress 的启动和 cy.visit 的调试_第9张图片

为什么会在这个 url 下面?https://example.cypress.io/__cypress/runner/cypress_runner.js

关于 Cypress 的启动和 cy.visit 的调试_第10张图片

https://example.cypress.io/todo

这是一个开发好的 web 应用:

关于 Cypress 的启动和 cy.visit 的调试_第11张图片

cy 的方法都是 generic 注入进去的:

关于 Cypress 的启动和 cy.visit 的调试_第12张图片

记住这个文件名:cypress_runner.js

运行队列:

关于 Cypress 的启动和 cy.visit 的调试_第13张图片

队列是一个 object:
关于 Cypress 的启动和 cy.visit 的调试_第14张图片

Promise 似乎不是原生的 Promise:
关于 Cypress 的启动和 cy.visit 的调试_第15张图片

如何才能看到 cy.visit 访问网站的准确动作?

关于 Cypress 的启动和 cy.visit 的调试_第16张图片

cy.visit 会立即返回,而不会同步的去访问网站:

it('let me debug like a fiend', () => {
  cy.visit('/my/page/path')

  cy.get('[data-testid="selector-in-question"]')

  debugger // Doesn't work
})

关于 Cypress 的启动和 cy.visit 的调试_第17张图片

这里是 Cypress 统一处理 action 的地方:

关于 Cypress 的启动和 cy.visit 的调试_第18张图片

action(eventName, ...args) {
                // normalizes all the various ways
                // other objects communicate intent
                // and 'action' to Cypress
                debug(eventName);

                switch (eventName) {
                case 'recorder:frame':
                    return this.emit('recorder:frame', args[0]);

                case 'cypress:stop':
                    return this.emit('stop');

关于 Cypress 的启动和 cy.visit 的调试_第19张图片

使用 onBeforeLoad 钩子,我们可以在 Web 应用的主页,加载之前,注入一些数据给它:

it('can modify window._bootstrappedData', function () {
      // in this solution we use cy.visit({onBeforeLoad: ...})
      // to modify the window._bootstrappedData global so that
      // it's passed into our App.start() method

      const data = {
        env: 'test',
        api: 'https://test-api.company.com',
      }

      cy.visit('/bootstrap.html', {
        onBeforeLoad: (win) => {
          win._bootstrappedData = data
        },
      })

      cy.get('pre')
      .invoke('text')
      .should('eq', JSON.stringify(data))
    })
  })

你可能感兴趣的:(关于 Cypress 的启动和 cy.visit 的调试)