Cypress（三）cypress實戰

一.例子，模擬慕課網登陸

1.在項目下新建login.js文件

2.在項目的cypress->integration目錄下新建login.spec.js文件,輸入如下代碼

/// <reference types="cypress" />context('Actions', () => { beforeEach(() => { cy.visit('https://www.imooc.com/') }) it('Login', () => { cy.get('#js-signin-btn').click() cy.get('.ipt-email').type('aa').should('have.value', 'aa') cy.get('.js-loginPassword').type('bb').should('have.value', 'bb') cy.get('.moco-btn-lg').click() })
})

3.而後在命令窗口，輸入npm run cypress

4.打開cypress選擇咱們新建的login.spec.js文件

5.cypress會自動打開瀏覽器模擬慕課網登陸

二.解決chrome下的跨域問題

找到項目根目錄下的cypress.json文件，增長以下配置

{ "chromeWebSecurity": false}

三.抽取baseUrl

找到項目根目錄下的cypress.json文件，增長以下配置

{ "baseUrl": "http://localhost:8013"}

四. cypress命令行

命令格式 

cypress run [options]

Option(選項)	Description
--browser, -b	指定的瀏覽器名或者瀏覽器路徑運行Cypress
--ci-build-id	給當前運行指定惟一標識
--config, -c	指定配置
--config-file, -C	指定配置文件
--env, -e	指定環境變量
--group	將當前運行的測試記錄進行分組
--headed	指定瀏覽器GUI模式運行
--headless	指定瀏覽器headless模式運行
--help, -h	顯示命令幫助信息
--key, -k	指定祕鑰
--no-exit	在執行完測試後，不退出Cypress
--parallel	經過多臺機器並行運行
--port,-p	指定Cypress啓動端口
--project, -P	指定Cypress啓動時的項目
--record	是否記錄測試
--reporter, -r	指定是否生成Mocha報告
--reporter-options, -o	指定生成Mocha報告選項
--spec, -s	指定運行的文件
--tag, -t	使用tag標識測試

那麼咱們怎麼去執行cypress命令呢，這裏咱們有兩種方式

1.cypress命令行腳本是在項目下面的node_modules/.bin目錄下，因此咱們在linux能夠輸入如下命令，windows系統能夠裝下git bash命令行工具也能輸入linux命令

./node_modules/.bin/cypress run

2.在項目的package.json文件加入如下配置

{ "scripts": { "cy:run": "cypress run" }}

而後就能夠經過npm命令來執行

npm run cy:run -- --record --spec "cypress/integration/login.js"

本文分享自微信公衆號 - 軟件測試架構師俱樂部（gh_03227f9a322f）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。