第一个实践任务,在陆言舟清晰的步骤指导下,虽然磕绊,但总算成功了。
她看着自己写的代码成功点击了一个按钮,网页弹出提示框的那一刻,她几乎要欢呼出来,一种前所未有的成就感油然而生。
但第二个思考题——“获取某个输入框里的文字”,却难住了她。
她凭着记忆在文档里翻找,尝试了几个看起来可能的命令,不是报错就是返回 `undefined` 或空值。
那种熟悉的、被逻辑迷宫困住的感觉又回来了。
周三的课程如期而至。
苏念带着她的“未解之谜”早早进入了会议室。
陆言舟上线,依旧是那副从容不迫的样子。
“晚上好,同学们。
在讲解新内容之前,我们先来回顾一下上节课的难点,并看看大家的作业情况。”
他共享了屏幕,没有首接打开代码编辑器,而是展示了一张手绘风格的思维导图。
“关于Cypress如何与浏览器交互,以及它的命令队列机制,我为大家梳理了一个简单的脉络。”
陆言舟的声音将大家的注意力吸引到导图上。
导图的核心是“Cypress 命令执行模型”,延伸出几个主干:* **特性:异步执行、链式调用、自动重试。
*** **比喻理解:餐厅点餐(队列等待)、智能管家(自动处理)。
*** **常见误区:** 用 `for`循环处理异步?
**(画了个大红叉)** -> 正确思路:利用链式调用或内置命令。
* **核心原则:** **Cypress命令像一套组合指令,它自己会管理执行顺序和等待。
**这张图色彩分明,逻辑清晰,一下子就把抽象的概念具象化了。
苏念赶紧截屏保存,感觉脑子里零散的知识点被这根“线”串了起来。
“这张图大家可以保存,课后反复看,有助于理解底层逻辑。”
陆言舟说着,切换到了几个匿名作业代码片段,“作业中,我看到很多同学对‘获取元素文本’这个任务完成了得很好,普遍使用了 `.invoke(text)` 或 `.then($el => $el.text())` 的方法。”
苏念心里一紧,认真地看着那些正确的代码。
“但是,”陆言舟话锋一转,“也有部分同学遇到了问题,比如获取不到值,或者得到的是 `undefined`。
这通常涉及我们今天要讲的另一个重中之重——**Cypress的等待机制**。”
他创建了一个新的代码示例,模拟了一个常见场景:一个输入框,在用户点击按钮后,需要过一秒钟才会从服务器加载并显示文字。
“如果我们写:`cy.get(input).type(hello); cy.get(.display-area).should(have.text, hello)`,有时会失败。
为什么?”
他看着互动区,似乎在等待回答。
苏念想起刚才的思维导图里的“自动重试”,犹豫着在聊天框打字:“因为……命令发出后,显示区域还没更新好?”
“苏念同学说得非常接近了!”
陆言舟立刻肯定了这一点,“Cypress的断言命令,比如 `.should()`,本身具有自动重试和等待的能力。
它会反复检查,首到元素符合断言条件(例如包含‘hello’文本)或者超时。”
他接着引入了更明确的等待命令 `cy.wait()` 用于固定时间等待,并强调了其不推荐性,以及 `cy.intercept()` 用于等待网络请求的更佳实践。
“记住一个原则:**优先使用Cypress内置的智能等待(如 `.should()`),而非死板的 `cy.wait()`**。
这就像等电梯,你不会每隔一秒按一次按钮(`cy.wait(1000)`),而是看着指示灯,首到它到达你的楼层(`.should(be.visible)`)。”
又一个精妙的比喻!
苏念感觉自己对“等待”这个概念的理解深刻了许多。
她联想到自己作业失败的原因,很可能就是在获取文本时,元素的内容还没有准备好,而她却没有使用正确的断言去等待。
“所以,回到获取文本的问题,”陆言舟总结道,“核心两步:一,**定位到正确的元素**(CSS选择器要准);二,**在合适的时机去获取**(确保内容己加载)。
时机问题,就可以用 `.should()` 来保证。”
他现场演示了修正后的代码,在获取文本前加入了对元素可见或包含某内容的断言,代码果然稳定地获取到了文本。
苏念恍然大悟,立刻在笔记上记下:**“时机!
用.should()确保状态再操作!”
**接下来的课程,陆言舟讲解了更多的Cypress选择器技巧和页面导航命令。
他每讲一个知识点,都会引导学员思考可能的应用场景和陷阱,而不是首接灌输。
苏念发现,自己开始慢慢尝试在提问前,先自己推理一下可能的原因了。
课程结束时,陆言舟布置了新作业,并说:“学习编程,尤其是测试,本质上是在学习一种严谨的思维方式。
犯错是常态,从错误中反思和总结,才是进步的快车道。”
下课了,陆言舟关闭了共享屏幕,却没有立刻离开会议室。
他翻看着学员的作业记录,停留在了苏念提交的那份上。
她的代码虽然错了,但在思考过程一栏里,却详细写了她尝试过的几种方法和遇到的错误信息。
**教学反思:** 今日重点讲解了“等待”机制,运用了思维导图和生活比喻(电梯),效果似乎不错。
大部分学员对 `.should()` 的智能等待有了初步概念。
苏念这位学员,逻辑基础确实薄弱,但从作业和课堂反应看,态度极其认真,具备很好的复盘习惯。
下一步可以多鼓励她表达自己的思考路径,即使错了,也能帮助我精准定位她的知识盲点,从而针对性引导。
她的那种不放弃的劲儿,倒是很像当初刚开始学编程的自己。
他默默地在教学笔记里,为下一节课设计了一个小小的互动环节。
或许,可以让她来分享一下自己排查错误的过程?
这应该比首接告诉她正确答案,更能锻炼她的独立思考能力。