DEV Community

panfan
panfan

Posted on

Cypress入门

XBcHdy

Cypress 包含测试网站所必须的所有组件,可以快速编写测试用例。

下载源码

git clone github.com/ahfarmer/emoji-search
#安装依赖
cd emoji-search && npm install
#启动项目
npm run start
#访问http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

65rXws

安装 Cypress

#安装
npm install cypress —save-dev

#启动
npx cypress open
#或者
./node_modules/.bin/cypress open
#或者
$(npm bin)/cypress open
Enter fullscreen mode Exit fullscreen mode

以上命令将会在项目根目录创建cypress文件夹,如下: 09GuGd

创建测试用例

默认情况下,所有测试都存储在cypress/integration文件夹中,该文件夹在第一次Cypress启动时自动创建。在此示例中,我们将编写一个测试,该测试将:

检查输入单词lollipop后是否在页面上仅显示一个结果

检查标题类的标签是否包含正确的文本

首先在cypress/integration目录中创建一个sample_spec.js文件:

该文件应包含以下代码:

describe('Sample test', () => {
  it('Search lollipop emoji', () => {
    cy.visit('http://localhost:3000/') // launch project website
    cy.get('input').type('lollipop') // enter 'lollipop' in search
    cy.get('.component-emoji-result-row').should('have.length', 1) // check if only 1 result is returned
    cy.contains('Lollipop').should('have.class', 'title') // check if returned element contains 'title' class
  })
})
Enter fullscreen mode Exit fullscreen mode

你将会看到这样的窗口:

ZabqgO

单击sample_spec.js后,将打开一个带有搜索引擎实例的窗口,您可以在其中实时预览执行的测试。结果应如下所示(请记住,带有示例性网站的项目应该正在运行):

3NotH3

Top comments (0)