第3章 破解命令鏈與決策樹
測(cè)試你的心
周一的課程結(jié)束后，蘇念感覺(jué)自己像打了一場(chǎng)硬仗。
陸言舟布置的新作業(yè)是：“編寫一個(gè)測(cè)試腳本，登錄一個(gè)演示網(wǎng)站，在成功登錄后，判斷頁(yè)面上顯示的用戶名是否正確，并實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄狀態(tài)檢查?！?br>
這個(gè)作業(yè)綜合運(yùn)用了訪問(wèn)、點(diǎn)擊、獲取文本和斷言，對(duì)蘇念來(lái)說(shuō)是個(gè)不小的挑戰(zhàn)。
她卡在了“獲取登錄后顯示的用戶名”這一步，總是提示“Timed out retrying after 4000ms: Expected to find element: .username, *ut never found it.”（在4000毫秒后重試超時(shí)：期望找到元素 .username，但始終未找到。
）她反復(fù)檢查選擇器，甚至手動(dòng)在頁(yè)面上確認(rèn)了那個(gè)元素確實(shí)存在，類名也確實(shí)是 `.username`。
問(wèn)題到底出在哪里？
周五晚上，蘇念帶著滿腹疑惑和寫得一團(tuán)亂的代碼，進(jìn)入了陸言舟的答疑課。
答疑課的氣氛比正課更輕松一些，陸言舟沒(méi)有首接講解新知識(shí)，而是針對(duì)大家作業(yè)中普遍出現(xiàn)的問(wèn)題進(jìn)行集中解答。
“我看到不少同學(xué)在‘獲取登錄后用戶名’這個(gè)任務(wù)上遇到了麻煩，錯(cuò)誤提示是找不到元素?！?br>
陸言舟開門見(jiàn)山，他的話立刻讓蘇念豎起了耳朵。
他共享屏幕，展示了一個(gè)簡(jiǎn)化的錯(cuò)誤代碼示例，幾乎和蘇念遇到的情況一模一樣。
“很多同學(xué)的第一反應(yīng)是：‘我的選擇器寫錯(cuò)了’。
這確實(shí)是一個(gè)可能，但大家己經(jīng)手動(dòng)驗(yàn)證過(guò)，選擇器是正確的。
那么，問(wèn)題很可能出在**時(shí)機(jī)**上。”
陸言舟強(qiáng)調(diào)了最后兩個(gè)字。
他并沒(méi)有首接給出正確答案，而是再次展示了一張思維導(dǎo)圖，中心主題是 **“Cypress命令鏈的執(zhí)行與異步操作”**。
導(dǎo)圖的分支清晰地列出了幾種情況：* **情況一：同步命令鏈** (如 `cy.get().click().get().should()`) -＞ **Cypress自動(dòng)管理隊(duì)列，無(wú)需擔(dān)心**。
* **情況二：需要從頁(yè)面獲取值，并用于后續(xù)邏輯** -＞ **這是難點(diǎn)！
必須使用 `.then()` 或 `alias`**。
* **關(guān)鍵陷阱：** 不能在Cypress命令外部使用獲取的值，也不能用變量首接“接住”命令的返回值。
* **錯(cuò)誤示范：** `let text = cy.get(.el).invoke(text)` -＞ `text` 不是文本，是一個(gè)命令對(duì)象！
* **核心概念重溫：** Cypress命令是**異步**的，像“派發(fā)任務(wù)”，不會(huì)立刻返回結(jié)果。
“對(duì)于我們的登錄場(chǎng)景，”陸言舟引導(dǎo)著大家的思路，“`cy.visit()` 訪問(wèn)頁(yè)面 -＞ `cy.get(#username).type()` 輸入用戶名 -＞ `cy.get(#password).type()` 輸入密碼 -＞ `cy.get(#login-*tn).click()` 點(diǎn)擊登錄。
這一系列操作都是‘派發(fā)任務(wù)’。
點(diǎn)擊登錄后，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器驗(yàn)證身份，再返回一個(gè)新的頁(yè)面（比如跳轉(zhuǎn)到 **sh*oard 頁(yè)面）。
**這個(gè)‘跳轉(zhuǎn)’和‘新頁(yè)面數(shù)據(jù)加載’是需要時(shí)間的！
**”他在思維導(dǎo)圖上“情況二”的分支旁，畫了一個(gè)大大的箭頭，指向了一個(gè)新的區(qū)域：**“.then() - 通往結(jié)果世界的‘鑰匙’”**。
“當(dāng)我們使用 `cy.get(.username).invoke(text)` 時(shí)，這個(gè)命令是在登錄點(diǎn)擊動(dòng)作**之后**立刻發(fā)出的。
但是，此時(shí)頁(yè)面可能還在跳轉(zhuǎn)加載中，那個(gè) `.username` 元素可能根本還沒(méi)出現(xiàn)在頁(yè)面上！
Cypress 很盡責(zé)，它會(huì)用4秒鐘反復(fù)去找這個(gè)元素，如果4秒內(nèi)一首沒(méi)找到，就會(huì)拋出超時(shí)錯(cuò)誤?！?br>
蘇念屏住呼吸，感覺(jué)自己終于摸到了問(wèn)題的邊緣。
“那么，如何確保我們?cè)谠?*確定存在**之后再去獲取它的文本呢？”
陸言舟拋出了問(wèn)題，停頓了幾秒，然后給出了解決方案，“我們需要一個(gè)‘等待頁(yè)面穩(wěn)定’的時(shí)機(jī)。
最可靠的方式之一，是等待一個(gè)**登錄成功的明確信號(hào)**?！?br>
他切換到代碼編輯器，開始編寫：“比如，登錄成功后，頁(yè)面可能會(huì)跳轉(zhuǎn)到一個(gè)新的**L，我們可以等待這個(gè)**L：”```j**ascriptcy.url().should(include, /**sh*oard); // 等待**L包含/**sh*oard```“或者，等待一個(gè)只有登錄成功后才出現(xiàn)的特定元素：”```j**ascriptcy.get(.welcome-msg).should(*e.visi*le); // 等待歡迎信息出現(xiàn)```“**在這個(gè)斷言成功之后，我們才能確信，頁(yè)面己經(jīng)準(zhǔn)備好了，那個(gè) `.username` 元素己經(jīng)穩(wěn)定地存在于DOM中。
** 此時(shí)，我們?cè)賵?zhí)行 `cy.get(.username).invoke(text)`，就幾乎不會(huì)失敗了?！?br>
他演示了修正后的完整代碼，流程清晰，運(yùn)行成功。
為了讓這個(gè)概念更深刻，陸言舟又引入了一個(gè)“**決策樹**”的概念，來(lái)講解如何在測(cè)試中做條件判斷。
“假設(shè)我們想驗(yàn)證，如果登錄失敗，頁(yè)面上會(huì)顯示錯(cuò)誤提示。
這個(gè)過(guò)程就像一個(gè)簡(jiǎn)單的決策樹：1. 起點(diǎn)：訪問(wèn)登錄頁(yè)。
2. 行動(dòng)：輸入**錯(cuò)誤**的密碼。
3. 點(diǎn)擊登錄。
4. 決策點(diǎn)（斷言）：頁(yè)面**不應(yīng)該**跳轉(zhuǎn)（`cy.url().should(not.include, /**sh*oard)`），并且**應(yīng)該**顯示錯(cuò)誤提示（`cy.get(.error-msg).should(*e.visi*le)`）。
這個(gè)‘決策樹’幫助我們結(jié)構(gòu)化測(cè)試邏輯，讓每一步的預(yù)期都變得明確?！?br>
蘇念看著屏幕上清晰的代碼和邏輯圖，感覺(jué)之前纏繞在一起的線索被一根根捋順了。
她終于明白，自己失敗的原因不是選擇器，而是缺乏對(duì)“頁(yè)面狀態(tài)就緒”的明確等待。
她立刻在自己的代碼里加上了 `cy.url().should(include, /welcome)`，再次運(yùn)行，綠色的通過(guò)提示赫然出現(xiàn)！
那一刻的喜悅，堪比解出了一道世界難題。
**教學(xué)反思：**今日答疑課，重點(diǎn)突破了“.then()的使用時(shí)機(jī)”和“頁(yè)面狀態(tài)等待”這一高階難點(diǎn)。
通過(guò)思維導(dǎo)圖梳理命令鏈的本質(zhì)，并用“決策樹”將測(cè)試邏輯可視化，效果顯著。
大部分學(xué)員在引導(dǎo)下能自行推導(dǎo)出解決方案。
特別關(guān)注了蘇念，她在聊天區(qū)提到自己成功解決了問(wèn)題，并準(zhǔn)確復(fù)述了“等待明確信號(hào)”的核心思想。
能看到她從一個(gè)完全被動(dòng)的狀態(tài)，開始嘗試主動(dòng)構(gòu)建解決思路，這是獨(dú)立思考能力萌芽的標(biāo)志。
下次課可以引入更復(fù)雜的“自定義命令”概念，看她是否能將這種模式識(shí)別的能力遷移到新知識(shí)上。
她的進(jìn)步速度，令人驚喜。
或許，可以準(zhǔn)備一些更有挑戰(zhàn)性的“*onus”任務(wù)給她了
陸言舟布置的新作業(yè)是：“編寫一個(gè)測(cè)試腳本，登錄一個(gè)演示網(wǎng)站，在成功登錄后，判斷頁(yè)面上顯示的用戶名是否正確，并實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄狀態(tài)檢查?！?br>
這個(gè)作業(yè)綜合運(yùn)用了訪問(wèn)、點(diǎn)擊、獲取文本和斷言，對(duì)蘇念來(lái)說(shuō)是個(gè)不小的挑戰(zhàn)。
她卡在了“獲取登錄后顯示的用戶名”這一步，總是提示“Timed out retrying after 4000ms: Expected to find element: .username, *ut never found it.”（在4000毫秒后重試超時(shí)：期望找到元素 .username，但始終未找到。
）她反復(fù)檢查選擇器，甚至手動(dòng)在頁(yè)面上確認(rèn)了那個(gè)元素確實(shí)存在，類名也確實(shí)是 `.username`。
問(wèn)題到底出在哪里？
周五晚上，蘇念帶著滿腹疑惑和寫得一團(tuán)亂的代碼，進(jìn)入了陸言舟的答疑課。
答疑課的氣氛比正課更輕松一些，陸言舟沒(méi)有首接講解新知識(shí)，而是針對(duì)大家作業(yè)中普遍出現(xiàn)的問(wèn)題進(jìn)行集中解答。
“我看到不少同學(xué)在‘獲取登錄后用戶名’這個(gè)任務(wù)上遇到了麻煩，錯(cuò)誤提示是找不到元素?！?br>
陸言舟開門見(jiàn)山，他的話立刻讓蘇念豎起了耳朵。
他共享屏幕，展示了一個(gè)簡(jiǎn)化的錯(cuò)誤代碼示例，幾乎和蘇念遇到的情況一模一樣。
“很多同學(xué)的第一反應(yīng)是：‘我的選擇器寫錯(cuò)了’。
這確實(shí)是一個(gè)可能，但大家己經(jīng)手動(dòng)驗(yàn)證過(guò)，選擇器是正確的。
那么，問(wèn)題很可能出在**時(shí)機(jī)**上。”
陸言舟強(qiáng)調(diào)了最后兩個(gè)字。
他并沒(méi)有首接給出正確答案，而是再次展示了一張思維導(dǎo)圖，中心主題是 **“Cypress命令鏈的執(zhí)行與異步操作”**。
導(dǎo)圖的分支清晰地列出了幾種情況：* **情況一：同步命令鏈** (如 `cy.get().click().get().should()`) -＞ **Cypress自動(dòng)管理隊(duì)列，無(wú)需擔(dān)心**。
* **情況二：需要從頁(yè)面獲取值，并用于后續(xù)邏輯** -＞ **這是難點(diǎn)！
必須使用 `.then()` 或 `alias`**。
* **關(guān)鍵陷阱：** 不能在Cypress命令外部使用獲取的值，也不能用變量首接“接住”命令的返回值。
* **錯(cuò)誤示范：** `let text = cy.get(.el).invoke(text)` -＞ `text` 不是文本，是一個(gè)命令對(duì)象！
* **核心概念重溫：** Cypress命令是**異步**的，像“派發(fā)任務(wù)”，不會(huì)立刻返回結(jié)果。
“對(duì)于我們的登錄場(chǎng)景，”陸言舟引導(dǎo)著大家的思路，“`cy.visit()` 訪問(wèn)頁(yè)面 -＞ `cy.get(#username).type()` 輸入用戶名 -＞ `cy.get(#password).type()` 輸入密碼 -＞ `cy.get(#login-*tn).click()` 點(diǎn)擊登錄。
這一系列操作都是‘派發(fā)任務(wù)’。
點(diǎn)擊登錄后，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器驗(yàn)證身份，再返回一個(gè)新的頁(yè)面（比如跳轉(zhuǎn)到 **sh*oard 頁(yè)面）。
**這個(gè)‘跳轉(zhuǎn)’和‘新頁(yè)面數(shù)據(jù)加載’是需要時(shí)間的！
**”他在思維導(dǎo)圖上“情況二”的分支旁，畫了一個(gè)大大的箭頭，指向了一個(gè)新的區(qū)域：**“.then() - 通往結(jié)果世界的‘鑰匙’”**。
“當(dāng)我們使用 `cy.get(.username).invoke(text)` 時(shí)，這個(gè)命令是在登錄點(diǎn)擊動(dòng)作**之后**立刻發(fā)出的。
但是，此時(shí)頁(yè)面可能還在跳轉(zhuǎn)加載中，那個(gè) `.username` 元素可能根本還沒(méi)出現(xiàn)在頁(yè)面上！
Cypress 很盡責(zé)，它會(huì)用4秒鐘反復(fù)去找這個(gè)元素，如果4秒內(nèi)一首沒(méi)找到，就會(huì)拋出超時(shí)錯(cuò)誤?！?br>
蘇念屏住呼吸，感覺(jué)自己終于摸到了問(wèn)題的邊緣。
“那么，如何確保我們?cè)谠?*確定存在**之后再去獲取它的文本呢？”
陸言舟拋出了問(wèn)題，停頓了幾秒，然后給出了解決方案，“我們需要一個(gè)‘等待頁(yè)面穩(wěn)定’的時(shí)機(jī)。
最可靠的方式之一，是等待一個(gè)**登錄成功的明確信號(hào)**?！?br>
他切換到代碼編輯器，開始編寫：“比如，登錄成功后，頁(yè)面可能會(huì)跳轉(zhuǎn)到一個(gè)新的**L，我們可以等待這個(gè)**L：”```j**ascriptcy.url().should(include, /**sh*oard); // 等待**L包含/**sh*oard```“或者，等待一個(gè)只有登錄成功后才出現(xiàn)的特定元素：”```j**ascriptcy.get(.welcome-msg).should(*e.visi*le); // 等待歡迎信息出現(xiàn)```“**在這個(gè)斷言成功之后，我們才能確信，頁(yè)面己經(jīng)準(zhǔn)備好了，那個(gè) `.username` 元素己經(jīng)穩(wěn)定地存在于DOM中。
** 此時(shí)，我們?cè)賵?zhí)行 `cy.get(.username).invoke(text)`，就幾乎不會(huì)失敗了?！?br>
他演示了修正后的完整代碼，流程清晰，運(yùn)行成功。
為了讓這個(gè)概念更深刻，陸言舟又引入了一個(gè)“**決策樹**”的概念，來(lái)講解如何在測(cè)試中做條件判斷。
“假設(shè)我們想驗(yàn)證，如果登錄失敗，頁(yè)面上會(huì)顯示錯(cuò)誤提示。
這個(gè)過(guò)程就像一個(gè)簡(jiǎn)單的決策樹：1. 起點(diǎn)：訪問(wèn)登錄頁(yè)。
2. 行動(dòng)：輸入**錯(cuò)誤**的密碼。
3. 點(diǎn)擊登錄。
4. 決策點(diǎn)（斷言）：頁(yè)面**不應(yīng)該**跳轉(zhuǎn)（`cy.url().should(not.include, /**sh*oard)`），并且**應(yīng)該**顯示錯(cuò)誤提示（`cy.get(.error-msg).should(*e.visi*le)`）。
這個(gè)‘決策樹’幫助我們結(jié)構(gòu)化測(cè)試邏輯，讓每一步的預(yù)期都變得明確?！?br>
蘇念看著屏幕上清晰的代碼和邏輯圖，感覺(jué)之前纏繞在一起的線索被一根根捋順了。
她終于明白，自己失敗的原因不是選擇器，而是缺乏對(duì)“頁(yè)面狀態(tài)就緒”的明確等待。
她立刻在自己的代碼里加上了 `cy.url().should(include, /welcome)`，再次運(yùn)行，綠色的通過(guò)提示赫然出現(xiàn)！
那一刻的喜悅，堪比解出了一道世界難題。
**教學(xué)反思：**今日答疑課，重點(diǎn)突破了“.then()的使用時(shí)機(jī)”和“頁(yè)面狀態(tài)等待”這一高階難點(diǎn)。
通過(guò)思維導(dǎo)圖梳理命令鏈的本質(zhì)，并用“決策樹”將測(cè)試邏輯可視化，效果顯著。
大部分學(xué)員在引導(dǎo)下能自行推導(dǎo)出解決方案。
特別關(guān)注了蘇念，她在聊天區(qū)提到自己成功解決了問(wèn)題，并準(zhǔn)確復(fù)述了“等待明確信號(hào)”的核心思想。
能看到她從一個(gè)完全被動(dòng)的狀態(tài)，開始嘗試主動(dòng)構(gòu)建解決思路，這是獨(dú)立思考能力萌芽的標(biāo)志。
下次課可以引入更復(fù)雜的“自定義命令”概念，看她是否能將這種模式識(shí)別的能力遷移到新知識(shí)上。
她的進(jìn)步速度，令人驚喜。
或許，可以準(zhǔn)備一些更有挑戰(zhàn)性的“*onus”任務(wù)給她了