第2章 思維導(dǎo)圖與等待的哲學(xué)
測試你的心
蘇念對著課后作業(yè)奮斗了兩個(gè)晚上。
第一個(gè)實(shí)踐任務(wù)，在陸言舟清晰的步驟指導(dǎo)下，雖然磕絆，但總算成功了。
她看著自己寫的代碼成功點(diǎn)擊了一個(gè)按鈕，網(wǎng)頁彈出提示框的那一刻，她幾乎要?dú)g呼出來，一種前所未有的成就感油然而生。
但第二個(gè)思考題——“獲取某個(gè)輸入框里的文字”，卻難住了她。
她憑著記憶在文檔里翻找，嘗試了幾個(gè)看起來可能的命令，不是報(bào)錯(cuò)就是返回 `undefined` 或空值。
那種熟悉的、被邏輯迷宮困住的感覺又回來了。
周三的課程如期而至。
蘇念帶著她的“未解之謎”早早進(jìn)入了會(huì)議室。
陸言舟上線，依舊是那副從容不迫的樣子。
“晚上好，同學(xué)們。
在講解新內(nèi)容之前，我們先來回顧一下上節(jié)課的難點(diǎn)，并看看大家的作業(yè)情況?！?br>
他共享了屏幕，沒有首接打開代碼編輯器，而是展示了一張手繪風(fēng)格的思維導(dǎo)圖。
“關(guān)于Cypress如何與瀏覽器交互，以及它的命令隊(duì)列機(jī)制，我為大家梳理了一個(gè)簡單的脈絡(luò)。”
陸言舟的聲音將大家的注意力吸引到導(dǎo)圖上。
導(dǎo)圖的核心是“Cypress 命令執(zhí)行模型”，延伸出幾個(gè)主干：* **特性：異步執(zhí)行、鏈?zhǔn)秸{(diào)用、自動(dòng)重試。
*** **比喻理解：餐廳點(diǎn)餐（隊(duì)列等待）、智能管家（自動(dòng)處理）。
*** **常見誤區(qū)：** 用 `for`循環(huán)處理異步？
**（畫了個(gè)大紅叉）** -＞ 正確思路：利用鏈?zhǔn)秸{(diào)用或內(nèi)置命令。
* **核心原則：** **Cypress命令像一套組合指令，它自己會(huì)管理執(zhí)行順序和等待。
**這張圖色彩分明，邏輯清晰，一下子就把抽象的概念具象化了。
蘇念趕緊截屏保存，感覺腦子里零散的知識(shí)點(diǎn)被這根“線”串了起來。
“這張圖大家可以保存，課后反復(fù)看，有助于理解底層邏輯?！?br>
陸言舟說著，切換到了幾個(gè)匿名作業(yè)代碼片段，“作業(yè)中，我看到很多同學(xué)對‘獲取元素文本’這個(gè)任務(wù)完成了得很好，普遍使用了 `.invoke(text)` 或 `.then($el =＞ $el.text())` 的方法?！?br>
蘇念心里一緊，認(rèn)真地看著那些正確的代碼。
“但是，”陸言舟話鋒一轉(zhuǎn)，“也有部分同學(xué)遇到了問題，比如獲取不到值，或者得到的是 `undefined`。
這通常涉及我們今天要講的另一個(gè)重中之重——**Cypress的等待機(jī)制**?！?br>
他創(chuàng)建了一個(gè)新的代碼示例，模擬了一個(gè)常見場景：一個(gè)輸入框，在用戶點(diǎn)擊按鈕后，需要過一秒鐘才會(huì)從服務(wù)器加載并顯示文字。
“如果我們寫：`cy.get(input).type(hello)； cy.get(.display-area).should(h**e.text, hello)`，有時(shí)會(huì)失敗。
為什么？”
他看著互動(dòng)區(qū)，似乎在等待回答。
蘇念想起剛才的思維導(dǎo)圖里的“自動(dòng)重試”，猶豫著在聊天框打字：“因?yàn)椤畎l(fā)出后，顯示區(qū)域還沒更新好？”
“蘇念同學(xué)說得非常接近了！”
陸言舟立刻肯定了這一點(diǎn)，“Cypress的斷言命令，比如 `.should()`，本身具有自動(dòng)重試和等待的能力。
它會(huì)反復(fù)檢查，首到元素符合斷言條件（例如包含‘hello’文本）或者超時(shí)。”
他接著引入了更明確的等待命令 `cy.wait()` 用于固定時(shí)間等待，并強(qiáng)調(diào)了其不推薦性，以及 `cy.intercept()` 用于等待網(wǎng)絡(luò)請求的更佳實(shí)踐。
“記住一個(gè)原則：**優(yōu)先使用Cypress內(nèi)置的智能等待（如 `.should()`），而非死板的 `cy.wait()`**。
這就像等電梯，你不會(huì)每隔一秒按一次按鈕（`cy.wait(1000)`），而是看著指示燈，首到它到達(dá)你的樓層（`.should(*e.visi*le)`）?！?br>
又一個(gè)精妙的比喻！
蘇念感覺自己對“等待”這個(gè)概念的理解深刻了許多。
她聯(lián)想到自己作業(yè)失敗的原因，很可能就是在獲取文本時(shí)，元素的內(nèi)容還沒有準(zhǔn)備好，而她卻沒有使用正確的斷言去等待。
“所以，回到獲取文本的問題，”陸言舟總結(jié)道，“核心兩步：一，**定位到正確的元素**（**S選擇器要準(zhǔn)）；二，**在合適的時(shí)機(jī)去獲取**（確保內(nèi)容己加載）。
時(shí)機(jī)問題，就可以用 `.should()` 來保證?！?br>
他現(xiàn)場演示了修正后的代碼，在獲取文本前加入了對元素可見或包含某內(nèi)容的斷言，代碼果然穩(wěn)定地獲取到了文本。
蘇念恍然大悟，立刻在筆記上記下：**“時(shí)機(jī)！
用.should()確保狀態(tài)再操作！”
**接下來的課程，陸言舟講解了更多的Cypress選擇器技巧和頁面導(dǎo)航命令。
他每講一個(gè)知識(shí)點(diǎn)，都會(huì)引導(dǎo)學(xué)員思考可能的應(yīng)用場景和陷阱，而不是首接灌輸。
蘇念發(fā)現(xiàn)，自己開始慢慢嘗試在**前，先自己推理一下可能的原因了。
課程結(jié)束時(shí)，陸言舟布置了新作業(yè)，并說：“學(xué)習(xí)編程，尤其是測試，本質(zhì)上是在學(xué)習(xí)一種嚴(yán)謹(jǐn)?shù)乃季S方式。
犯錯(cuò)是常態(tài)，從錯(cuò)誤中反思和總結(jié)，才是進(jìn)步的快車道?！?br>
下課了，陸言舟關(guān)閉了共享屏幕，卻沒有立刻離開會(huì)議室。
他翻看著學(xué)員的作業(yè)記錄，停留在了蘇念提交的那份上。
她的代碼雖然錯(cuò)了，但在思考過程一欄里，卻詳細(xì)寫了她嘗試過的幾種方法和遇到的錯(cuò)誤信息。
**教學(xué)反思：** 今日重點(diǎn)講解了“等待”機(jī)制，運(yùn)用了思維導(dǎo)圖和生活比喻（電梯），效果似乎不錯(cuò)。
大部分學(xué)員對 `.should()` 的智能等待有了初步概念。
蘇念這位學(xué)員，邏輯基礎(chǔ)確實(shí)薄弱，但從作業(yè)和課堂反應(yīng)看，態(tài)度極其認(rèn)真，具備很好的復(fù)盤習(xí)慣。
下一步可以多鼓勵(lì)她表達(dá)自己的思考路徑，即使錯(cuò)了，也能幫助我精準(zhǔn)定位她的知識(shí)盲點(diǎn)，從而針對性引導(dǎo)。
她的那種不放棄的勁兒，倒是很像當(dāng)初剛開始學(xué)編程的自己。
他默默地在教學(xué)筆記里，為下一節(jié)課設(shè)計(jì)了一個(gè)小小的互動(dòng)環(huán)節(jié)。
或許，可以讓她來分享一下自己排查錯(cuò)誤的過程？
這應(yīng)該比首接告訴她正確答案，更能鍛煉她的獨(dú)立思考能力。
第一個(gè)實(shí)踐任務(wù)，在陸言舟清晰的步驟指導(dǎo)下，雖然磕絆，但總算成功了。
她看著自己寫的代碼成功點(diǎn)擊了一個(gè)按鈕，網(wǎng)頁彈出提示框的那一刻，她幾乎要?dú)g呼出來，一種前所未有的成就感油然而生。
但第二個(gè)思考題——“獲取某個(gè)輸入框里的文字”，卻難住了她。
她憑著記憶在文檔里翻找，嘗試了幾個(gè)看起來可能的命令，不是報(bào)錯(cuò)就是返回 `undefined` 或空值。
那種熟悉的、被邏輯迷宮困住的感覺又回來了。
周三的課程如期而至。
蘇念帶著她的“未解之謎”早早進(jìn)入了會(huì)議室。
陸言舟上線，依舊是那副從容不迫的樣子。
“晚上好，同學(xué)們。
在講解新內(nèi)容之前，我們先來回顧一下上節(jié)課的難點(diǎn)，并看看大家的作業(yè)情況?！?br>
他共享了屏幕，沒有首接打開代碼編輯器，而是展示了一張手繪風(fēng)格的思維導(dǎo)圖。
“關(guān)于Cypress如何與瀏覽器交互，以及它的命令隊(duì)列機(jī)制，我為大家梳理了一個(gè)簡單的脈絡(luò)。”
陸言舟的聲音將大家的注意力吸引到導(dǎo)圖上。
導(dǎo)圖的核心是“Cypress 命令執(zhí)行模型”，延伸出幾個(gè)主干：* **特性：異步執(zhí)行、鏈?zhǔn)秸{(diào)用、自動(dòng)重試。
*** **比喻理解：餐廳點(diǎn)餐（隊(duì)列等待）、智能管家（自動(dòng)處理）。
*** **常見誤區(qū)：** 用 `for`循環(huán)處理異步？
**（畫了個(gè)大紅叉）** -＞ 正確思路：利用鏈?zhǔn)秸{(diào)用或內(nèi)置命令。
* **核心原則：** **Cypress命令像一套組合指令，它自己會(huì)管理執(zhí)行順序和等待。
**這張圖色彩分明，邏輯清晰，一下子就把抽象的概念具象化了。
蘇念趕緊截屏保存，感覺腦子里零散的知識(shí)點(diǎn)被這根“線”串了起來。
“這張圖大家可以保存，課后反復(fù)看，有助于理解底層邏輯?！?br>
陸言舟說著，切換到了幾個(gè)匿名作業(yè)代碼片段，“作業(yè)中，我看到很多同學(xué)對‘獲取元素文本’這個(gè)任務(wù)完成了得很好，普遍使用了 `.invoke(text)` 或 `.then($el =＞ $el.text())` 的方法?！?br>
蘇念心里一緊，認(rèn)真地看著那些正確的代碼。
“但是，”陸言舟話鋒一轉(zhuǎn)，“也有部分同學(xué)遇到了問題，比如獲取不到值，或者得到的是 `undefined`。
這通常涉及我們今天要講的另一個(gè)重中之重——**Cypress的等待機(jī)制**?！?br>
他創(chuàng)建了一個(gè)新的代碼示例，模擬了一個(gè)常見場景：一個(gè)輸入框，在用戶點(diǎn)擊按鈕后，需要過一秒鐘才會(huì)從服務(wù)器加載并顯示文字。
“如果我們寫：`cy.get(input).type(hello)； cy.get(.display-area).should(h**e.text, hello)`，有時(shí)會(huì)失敗。
為什么？”
他看著互動(dòng)區(qū)，似乎在等待回答。
蘇念想起剛才的思維導(dǎo)圖里的“自動(dòng)重試”，猶豫著在聊天框打字：“因?yàn)椤畎l(fā)出后，顯示區(qū)域還沒更新好？”
“蘇念同學(xué)說得非常接近了！”
陸言舟立刻肯定了這一點(diǎn)，“Cypress的斷言命令，比如 `.should()`，本身具有自動(dòng)重試和等待的能力。
它會(huì)反復(fù)檢查，首到元素符合斷言條件（例如包含‘hello’文本）或者超時(shí)。”
他接著引入了更明確的等待命令 `cy.wait()` 用于固定時(shí)間等待，并強(qiáng)調(diào)了其不推薦性，以及 `cy.intercept()` 用于等待網(wǎng)絡(luò)請求的更佳實(shí)踐。
“記住一個(gè)原則：**優(yōu)先使用Cypress內(nèi)置的智能等待（如 `.should()`），而非死板的 `cy.wait()`**。
這就像等電梯，你不會(huì)每隔一秒按一次按鈕（`cy.wait(1000)`），而是看著指示燈，首到它到達(dá)你的樓層（`.should(*e.visi*le)`）?！?br>
又一個(gè)精妙的比喻！
蘇念感覺自己對“等待”這個(gè)概念的理解深刻了許多。
她聯(lián)想到自己作業(yè)失敗的原因，很可能就是在獲取文本時(shí)，元素的內(nèi)容還沒有準(zhǔn)備好，而她卻沒有使用正確的斷言去等待。
“所以，回到獲取文本的問題，”陸言舟總結(jié)道，“核心兩步：一，**定位到正確的元素**（**S選擇器要準(zhǔn)）；二，**在合適的時(shí)機(jī)去獲取**（確保內(nèi)容己加載）。
時(shí)機(jī)問題，就可以用 `.should()` 來保證?！?br>
他現(xiàn)場演示了修正后的代碼，在獲取文本前加入了對元素可見或包含某內(nèi)容的斷言，代碼果然穩(wěn)定地獲取到了文本。
蘇念恍然大悟，立刻在筆記上記下：**“時(shí)機(jī)！
用.should()確保狀態(tài)再操作！”
**接下來的課程，陸言舟講解了更多的Cypress選擇器技巧和頁面導(dǎo)航命令。
他每講一個(gè)知識(shí)點(diǎn)，都會(huì)引導(dǎo)學(xué)員思考可能的應(yīng)用場景和陷阱，而不是首接灌輸。
蘇念發(fā)現(xiàn)，自己開始慢慢嘗試在**前，先自己推理一下可能的原因了。
課程結(jié)束時(shí)，陸言舟布置了新作業(yè)，并說：“學(xué)習(xí)編程，尤其是測試，本質(zhì)上是在學(xué)習(xí)一種嚴(yán)謹(jǐn)?shù)乃季S方式。
犯錯(cuò)是常態(tài)，從錯(cuò)誤中反思和總結(jié)，才是進(jìn)步的快車道?！?br>
下課了，陸言舟關(guān)閉了共享屏幕，卻沒有立刻離開會(huì)議室。
他翻看著學(xué)員的作業(yè)記錄，停留在了蘇念提交的那份上。
她的代碼雖然錯(cuò)了，但在思考過程一欄里，卻詳細(xì)寫了她嘗試過的幾種方法和遇到的錯(cuò)誤信息。
**教學(xué)反思：** 今日重點(diǎn)講解了“等待”機(jī)制，運(yùn)用了思維導(dǎo)圖和生活比喻（電梯），效果似乎不錯(cuò)。
大部分學(xué)員對 `.should()` 的智能等待有了初步概念。
蘇念這位學(xué)員，邏輯基礎(chǔ)確實(shí)薄弱，但從作業(yè)和課堂反應(yīng)看，態(tài)度極其認(rèn)真，具備很好的復(fù)盤習(xí)慣。
下一步可以多鼓勵(lì)她表達(dá)自己的思考路徑，即使錯(cuò)了，也能幫助我精準(zhǔn)定位她的知識(shí)盲點(diǎn)，從而針對性引導(dǎo)。
她的那種不放棄的勁兒，倒是很像當(dāng)初剛開始學(xué)編程的自己。
他默默地在教學(xué)筆記里，為下一節(jié)課設(shè)計(jì)了一個(gè)小小的互動(dòng)環(huán)節(jié)。
或許，可以讓她來分享一下自己排查錯(cuò)誤的過程？
這應(yīng)該比首接告訴她正確答案，更能鍛煉她的獨(dú)立思考能力。