那些遇到过的问题

Cypress - 有 1 个测试调用另一个测试并运行它

Ror*_*lee 9 automated-tests cypress

我们正在使用 Cypress 来自动化单元、功能和表示层测试。我们的开发方法一直沿着在 React 环境中混合原子设计的路线。我们正在平衡 CSS 的无情 React 模块化与全局/区域/本地范围。因此，我们的测试组织也遵循相同的组织路线。

例如，我.../support/button_all.js在我们网站的所有 5 个断点（是的，5 个 - 不要问）中测试 UI 演示。 原子模式测试 - 所有按钮

describe('Global Button Patterns', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    it('GLOBAL & XS bp: Buttons display as designed', () => {
      // $pageURL needs be set/redefined
      // by local test variable
      // cy.visit('/')

      // All Buttons
      //cy.document()
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'background-color', 'rgba(0, 0, 0, 0)')
        .should('have.css', 'border-radius', '4px')
        .should('have.css', 'font-size', '11px')
        .should('have.css', 'font-weight', '800')
        .should('have.css', 'letter-spacing', '0.96px')
        .should('have.css', 'text-transform', 'uppercase')
      cy.get('[data-cy=button')
        .should('have.css', 'min-height')
        .should('be.gte', '30px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '117px')
      cy.get('[data-cy=button]')
        .should('have.css', 'border-width')
        .and('be.gte', '1px')
        .and('be.lte', '2px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^15/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^17/)

      // Button - Outline Light
      cy.get('.btn-outline-light')
        .should('have.css', 'border-color', 'rgb(255, 255, 255)')
        .should('have.css', 'color', 'rgb(255, 255, 255)')

      // Button - Outline Dark
      cy.get('.btn-outline-dark')
        .should('have.css', 'border-color', 'rgb(55, 71, 79)')
        .should('have.css', 'color', 'rgb(55, 71, 79)')

      // Button Light (used for Login buttons)

      // Button Light states - :focus, :hover, :active
      // Test manually for the moment.
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    it('SM bp: Default button displays as designed ', () => {
      // cy.visit('/')

      // All Buttons
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'font-size', '11.5px')
        .should('have.css', 'letter-spacing', '1.23px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '131px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^17/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^21/)
    })
  })

  context('laptop', () => {
    beforeEach(function() {
      cy.viewport(960, 600)
    })

    it('MD bp: Default button displays as designed', () => {
      // cy.visit('/')

      // All Buttons
      cy.get('[data-cy=button]')
        .should('be.visible')
        .should('have.css', 'font-size', '12.5px')
        .should('have.css', 'letter-spacing', '1.34px')
      cy.get('[data-cy=button]')
        .should('have.css', 'min-width')
        .should('be.gte', '139px')
      cy.get('[data-cy=button]')
        .should('have.css', 'line-height')
        .and('match', /^18/)
      cy.get('[data-cy=button]')
        .should('have.css', 'padding-right')
        .and('match', /^21/)
    })
  })
})
Run Code Online (Sandbox Code Playgroud)

我想在integration/components/hero.js文件中包含这个测试。hero.js 包含 5 个断点上下文。我希望 button_all.js 文件在运行断点上下文后运行。

组件测试 - hero.js

import Buttons from '../../support/buttons_all.js'

describe('Hero Component', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    // global pattern test(s)
    after(function() {
      // runs once after all tests in the block
    })

    it('displays Hero Component in mobile bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '14px 0px 40px')
        .should('have.css', 'width')
        .should('be.gt', '292px')
      cy.get('[data-cy=hero]')
        .should('have.css', 'background')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'color', 'rgb(255, 255, 255)')
        .should('have.css', 'font-size', '38px')
        .should('have.css', 'line-height').and('match', /^43/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'color', 'rgb(255, 255, 255)')
        .should('have.css', 'margin-top', '8px')
        .should('have.css', 'font-size', '15px')
        .should('have.css', 'line-height').and('match', /^18/)
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '12px')
        .should('have.css', 'margin-bottom').and('match', /0/)
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    it('displays Hero Component in tablet bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '28px 0px 30px')
        .should('have.css', 'width')
        .should('be.gt', '580px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '48px')
        .should('have.css', 'width')
        .should('be.gt', '300px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'line-height').and('match', /^54/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'margin-top', '8px')
        .should('have.css', 'font-size', '15.5px')
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '12px')
    })
  })

  context('laptop', () => {
    beforeEach(function() {
      cy.viewport(960, 600)
    })

    it('displays Hero Component in laptop bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '42px 0px 87.9936px')
        .should('have.css', 'width')
        .should('be.gt', '860px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '52px')
        .should('have.css', 'line-height').and('match', /^60/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'font-size', '16px')
        .should('have.css', 'margin-top', '10px')
        .should('have.css', 'line-height').and('match', /^20/)
      cy.get('[data-cy=hero] .btn-outline-light')
        .should('have.css', 'margin-top', '20px')
    })
  })

  context('desktop', () => {
    beforeEach(function() {
      cy.viewport(1280, 850)
    })

    it('displays Hero Component in desktop bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '56px 0px 129.997px')
        .should('have.css', 'width')
        .should('be.gt', '1168px')
      cy.get('[data-cy=hero] h1')
        .should('have.css', 'font-size', '60px')
        .should('have.css', 'line-height').and('match', /^70/)
      cy.get('[data-cy=hero] p')
        .should('have.css', 'font-size', '16px')
        .should('have.css', 'margin-top', '10px')
        .should('have.css', 'line-height').and('match', /^20/)
    })
  })

  context('oversized', () => {
    beforeEach(function() {
      cy.viewport(1600, 2048)
    })

    it('displays Hero Component in oversized bp as designed', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'padding', '70px 0px 188px')
    })
  })

  context('buttons_all.js', function(){

  })
})
Run Code Online (Sandbox Code Playgroud)

完成后，我想转到 my integration/pages/homepage/hero_spec.jswhich 声明去哪里并测试页面该区域中的实际内容。我希望 hero.js 测试在 hero_spec.js 中包含的上下文之后运行。

主页测试 - hero_spec.js

import HeroComponent from '../components/hero.js'

describe('Homepage - Hero Component', () => {
  context('mobile', () => {
    beforeEach(function() {
      cy.viewport(320, 740)
    })

    // global pattern test(s)
    after(function() {
      // runs once after all tests in the block
    })

    it('displays Homepage Hero Component as designed in mobile bp', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'background-image')
        .should('contain', 'live-life-confidence-1x1', 'contain', '.jpg')
      cy.get('[data-cy=hero] h1')
        .contains('Lorem Ipsum')
      cy.get('[data-cy=hero] p')
        .contains('Lorem ipsum sum amit dolor...')
      cy.get('[data-cy=hero] .btn-outline-light')
        .contains('About us')
        .should('have.attr', 'href')
        .and('match', /about-us/)
        .then((href) => {
          cy.visit(href)
        })
    })
  })

  context('tablet', () => {
    beforeEach(function() {
      cy.viewport(640, 1136)
    })

    after(function() {
      // runs once after all tests in the block
    })

    it('displays Homepage Hero Component as designed in tablet bp', () => {
      cy.visit('/')

      cy.get('[data-cy=hero]')
        .should('have.css', 'background-image')
        .should('contain', 'live-life-confidence-2x1', 'contain', '.jpg')
    })
  })

})
Run Code Online (Sandbox Code Playgroud)

我的问题是弄清楚如何以模块化方式引入测试。我在这个例子中看到，我可以导入和调用一个纯 JS 文件：https : //github.com/cypress-io/cypress-example-recipes/blob/master/examples/unit-testing__application-code/cypress/integration /unit_test_application_code_spec.js

虽然赛普拉斯的文档非常好，但似乎对能够实现这一点保持沉默。我很感激有一个方向可以解决这个问题。

Ric*_*sen 10

在您引用的示例配方中，导入都是 SUT，而不是其他测试。

要button_all.js在另一个测试中运行，请将其代码包装在一个函数中。您还可以传递参数来修改每次运行。

export function runButtonAllTests(testParams) {

  describe('Global Button Patterns', () => {
    context('mobile', () => {
      if (testParams.allBreakpoints) {
      ...

}
Run Code Online (Sandbox Code Playgroud)

通过调用函数来运行它。注意我将它保存在支持文件夹而不是集成文件夹中，以阻止赛普拉斯将其包含在“全部运行”中。

import { runButtonAllTests } from '../../support/run_button_all_tests.js'

describe('Homepage - Hero Component', () => {
  context('mobile', () => {
    before(function() {
      cy.viewport(320, 740)
      cy.visit('/')
    })

    context('buttons_all.js', function() {
      runButtonAllTests()
    })
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

6192 次

最近记录：

6 年，10 月 前
相关归档
CypressError：重试超时：cy.click() 失败，因为此元素与 DOM 分离 9
使用 babel、nyc 和 istanbul 插件从 Cypress 获取代码覆盖率？ 8
如何在Jenkins中显示单个测试通过/失败的结果？ 7
PhantomJS并单击表单按钮 6
使用 Appium 时，Android 物理设备中的键盘并不总是隐藏 5
拖放赛普拉斯测试仅在Electron浏览器中失败 5
appium无法在文本字段中输入 5
将 cypress 测试从旧版本迁移到最新版本会引发错误 5
概念验证应用程序是否应该进行自动化测试？ 3
Cypress 会话行为的说明 1
难疑归档
在CSS中设置cellpadding和cellspacing？ 3210
如何在不重新加载页面的情况下修改URL？ 2221
如何访问环境变量值？ 1878
如何在Java中打破嵌套循环？ 1751
如何在Python中删除尾部换行符？ 1593
喜欢构成而不是继承？ 1538
生成0到9之间的随机整数 1224
检查值是否是JavaScript中的对象 1194
如何以CSV格式输出MySQL查询结果？ 1118
#Hibernate hbm2ddl.auto配置的可能值是什么,它们做了什么 1046