携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
大家好，我是阿萨。昨天我们学习了Mac电脑如何安装Cypress？是不是都跃跃欲试，准备摩拳擦掌？今天我们就开始写一段login 脚本。一. 安装示例项目。为了连续cypress，我们先安装一个cypress的示例项目，搭建一个web项目。如果你们产品本身就是web 系统，也可以直接使用自己产品的web 系统。
git clone https://github.com/cypress-io/cypress-example-recipes.git
克隆了这个项目之后，开始安装。
cd cypress-example-recipesnpm install
这个项目就是为了说明cypress的用法特意说明的。每个子项目都是独立的。今天我们学习的是login，所以我们先启动login 的子项目。
cd examples/logging-in_html-web-formsnpm start
然后浏览器里输入 http://localhost:7077就可以看到login 页面啦。
二, 开始写login 的脚本。上面网页打开后，定位下username 和password 以及login的元素打开VSCode 之后，新建一个testlogin.cy.js 在e2e文件夹里面。文件名一定要带cy的。不带cy 的话，cypress 识别不出来的。
然后粘贴下面的代码到js 文件里。
describe('Login', function(){const username='Sarah'const password ='changeme_123'
context('Test HTML Login Form',function(){ it('Login success',function(){ cy.visit('http://localhost:7077/login') cy.get('input[name=username]').type(username) cy.get('input[name=password]').type(password) cy.get('form').submit()
cy.url().should('include','/dashboard') cy.get('h1').should('contain',username) })
})})
启动Cypress app 之后，运行所有测试。
ps：为了写我自己的demo 我把server.js里的username 和password修改了。大家也可以不用改，直接用server.js里的也可以。
留给大家2个思考题：
1.如果想要所有测试都通过，还需要修改server.js 那一行代码？
2.如果不想修改用户名和密码，需要用到的用户名和密码是什么？
今天的学习到这里了。你学会了吗？如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
