一個人到底要走多少彎路，才能成為一名合格的測試開發(fā)工程師？

轉眼之間，Cypress又又又更新啦！我將講解Cypress最新Release的10.x版本，包括新版本的安裝使用、老版本的遷移。今天是第一篇， Cypress10.x新版本安裝使用（買了書的同學們，公眾號回復你的微信號，拉你到Cypress中國群）。

最近兩年測試界最火的測試工具莫過于Cypress，作為測試工程師彎道超車必備、下一代UI自動化測試利器，Cypress開發(fā)團隊也一直在拼命做事，這不，Cypress10.x重磅發(fā)布，將“Component Testing”重磅引入到了測試團隊。測試人員又可以將自己的勢力版圖向開發(fā)側移動一下啦：）

Cypress10.x是迄今為止Cypress最大一次改版，如果你是Cypress老用戶，靜待幾天，我將再出一篇Cypress開發(fā)遷移至南。今天先服務新用戶。為新接觸Cypress的同學講解Cypress 10.x的安裝使用。

如果你買了書，你會發(fā)現(xiàn)書上安裝好的界面截圖跟你看到的不一致，不要緊，底層沒變。

安裝

安裝一點沒變。推薦你用VS Code創(chuàng)建項目根目錄，然后，在項目根目錄下執(zhí)行如下命令

# 兩種方式你隨意挑選即可
# npm和yarn的安裝我不講了，你自己看書或者網(wǎng)上找
npm install cypress --save-dev

yarn add cypress@latest

安裝好后，你會發(fā)現(xiàn)項目根目錄（本例為ITESTINGDEMO）下多了如下文件/文件夾。

這個時候你還什么也看不到，沒關系，繼續(xù)在項目根目錄下執(zhí)行如下命令：

// 關注iTesting， 加入萬人測試社群
npx cypress open

然后奇跡出現(xiàn)了：）你將會看到如下頁面。（這個就是Cypress10.x的新界面了，其中E2E Testing，是我們之前用Cyprres做的所有的測試統(tǒng)稱， Component Testing是Cypress10.x版本才引進的，組件測試，怎么樣，看名字想到了啥？UT->Componment Testing->Contract Testing/API Testing->UI Testing）,測試人員的版圖是不是又要擴展了？：）

我們稍安勿躁，先選擇E2E Testing，你會看到Cypress會引導你創(chuàng)建一些文件。

你可以直接點Continue繼續(xù)，Cypress會自動為你創(chuàng)建這些文件。

這里為老用戶解釋下：在新版本中，Cypress有意區(qū)分了2種類型的測試。E2E測試和Componment Testing?，F(xiàn)在我們配置的是E2E測試的選項，其中：

cypress.config.js 就相當于以往cyprss.json的功效。

cypress/support/e2e.js,就相當于以往cypress/support/index.js。

cypress/support/commands.js ，這個文件沒變，還是原來的作用。

cypress/fixtures/example.json，這個是數(shù)據(jù)驅動文件，放測試數(shù)據(jù)的，但是看過書的最大，一般我們都不用，我們自己會放在頁面文件下。

你點擊過Continue后，Cypress會讓你選擇執(zhí)行的瀏覽器，注意這里的瀏覽器只能是Cypress支持的瀏覽器，你些瀏覽器你安裝了幾個，這里就顯示幾個。

我們選擇Chrome，然后點擊那個“Start E2E Testing in Chrome”，這個時候你能看到下面這個類似于Cypress DashBoard的東東（這個也是Cypress的雞賊支持，新版本直接把交互式運行器和DashBoard做了集成了。）

因為我們什么測試用例都沒建呢，所以我們選擇上圖的第一個“Scaffold example specs”，這個就是給你的一些現(xiàn)成的測試腳手架，讓你快速了解下通過Cypress創(chuàng)建出來的測試用例是什么樣子的。不得不說，前端開發(fā)就是比后端開發(fā)講究。

你選擇這個后，會看到這個圖：

繼續(xù)點擊“Okey”，可以看到很多測試用例就生成好了。以后你寫的新的測試用例，也會一并顯示在這里。

這個時候，你切換到你項目根目錄下，就會發(fā)現(xiàn)多了很多文件，這些文件就是運行一個Cypress測試的必要文件。

在這些文件中，注意：

e2e文件夾，就是以前我們的IntegrationTest文件夾。

下面1， 2 這些就是測試文件夾，注意這些文件夾下的測試文件后綴名，現(xiàn)在都叫**.cy.js了。

然后你隨便找個.cy.js文件打開看：


  describe('關注iTesting， 學好Cypress', () => {
    it(() => {
      // 老配方老味道，這里不多講
      // 看過書的知道，這個代碼組織方式不是最佳實踐，最佳實踐在書上：）
      cy.contains('Pay electric bill')
        .parent()
        .find('input[type=checkbox]')
        .check()
    })

我們隨便在Cypress最新的交互式運行器上（不確定Cypress官方還叫不叫這個名了，這個更像一個dashboard），選擇一個測試用例運行下。