【原创】Cypress Vue CLI前端自动化测试自学与项目实践

一、环境构建

　　1. 下载并安装Node.js

　　2. 创建一个项目文件夹，执行npm init -y，然后npm install cyperss

　　3. npx cyperss open

二、小试牛刀

　　1. 运行一遍examples代码，即可看到https://example.cypress.io/的示例代码都执行了一遍

三、研究示例帮助和API

　　1. 自行学习examples代码，分析每个示例脚本，教会了哪些必备技能

Commands

Commands drive your tests in the browser like a real user would. They let you perform actions like typing, clicking, xhr requests, and can also assert things like "my button should be disabled".

• Querying（querying.spec.js）
  • get
  • contains
  • within
  • root
• Traversal（traversal.spec.js）
  • children
  • closest
  • eq
  • filter
  • find
  • first
  • last
  • next
  • nextAll
  • nextUntil
  • not
  • parent
  • parents
  • parentsUntil
  • prev
  • prevAll
  • prevUntil
  • siblings
• Actions（actions.spec.js）
  • type
  • focus
  • blur
  • clear
  • submit
  • click
  • dblclick
  • rightclick
  • check
  • uncheck
  • select
  • scrollIntoView
  • scrollTo
  • trigger
• Window（window.spec.js）
  • window
  • document
  • title
• Viewport（viewport.spec.js）
  • viewport
• Location（location.spec.js）
  • hash
  • location
  • url
• Navigation（navigation.spec.js）
  • go
  • reload
  • visit
• Assertions（assertions.spec.js）
  • Implicit Assertions
  • should
  • and
  • Explicit Assertions
  • expect
  • assert
• Misc（misc.spec.js）
  • end
  • exec
  • focused
  • screenshot
  • wrap
• Connectors（connectors.spec.js）
  • each
  • its
  • invoke
  • spread
  • then
• Aliasing（aliasing.spec.js）
  • as
• Waiting（waiting.spec.js）
  • wait
• Network Requests（network_requests.spec.js）
  • server
  • request
  • route
• Files（files.spec.js）
  • fixtures
  • readFile
  • writeFile
• Local Storage（local_storage.spec.js）
  • clearLocalStorage
• Cookies（cookies.spec.js）
  • clearCookies
• Spies, Stubs & Clocks（spies_stubs_clocks.spec.js）
  • spy
  • stub
  • clock
  • tick

Utilities（utilities.spec.js）

Utilities give you access to methods from other commonly used libraries.

• • _
  • $
  • Blob
  • minimatch
  • moment
  • Promise

Cypress API（cypress_api.spec.js）

The Cypress API enables you to configure the behavior of how Cypress works internally. You can do things like access Environment Variables, change configuration, create custom commands, and more.

• • Commands
  • Cookies
  • Server
  • arch
  • config
  • dom
  • env
  • log
  • platform
  • version

四、项目实践

　　在你的项目中，从登录/登出开始，逐步完成前端UI自动化验证脚本设计和实现；