自動(dòng)前端測(cè)試很棒。我們可以編寫帶有代碼的測(cè)試以訪問頁面 - 或僅加載一個(gè)組件 - 並像用戶一樣單擊“事物”或“鍵入文本”，然後在交互後對(duì)應(yīng)用程序狀態(tài)發(fā)出斷言。這使我們能夠確認(rèn)測(cè)試中描述的所有內(nèi)容都按照應(yīng)用程序預(yù)期工作。

由於這篇文章大約是任何自動(dòng)化UI測(cè)試的構(gòu)建塊之一，因此我不認(rèn)為太多的先驗(yàn)知識(shí)。如果您已經(jīng)熟悉基礎(chǔ)知識(shí)，請(qǐng)隨意跳過前幾個(gè)部分。

前端測(cè)試的結(jié)構(gòu)

有一個(gè)經(jīng)典的模式在編寫測(cè)試時(shí)可以知道：安排，表演，斷言。在前端測(cè)試中，這轉(zhuǎn)化為執(zhí)行以下操作的測(cè)試文件：

1. 安排：準(zhǔn)備好測(cè)試。訪問特定頁面，或用正確的道具安裝某個(gè)組件，嘲笑某些狀態(tài)等。
2. ACT：對(duì)應(yīng)用程序做點(diǎn)事。單擊一個(gè)按鈕，填寫表格等。對(duì)於簡(jiǎn)單的狀態(tài)檢查，我們可以跳過此。
3. 斷言：檢查一些東西。提交表格顯示了感謝信嗎？它是否通過帖子將正確的數(shù)據(jù)發(fā)送到後端？

在指定與內(nèi)容進(jìn)行交互的內(nèi)容時(shí)，我們可以使用各種元素定位器來定位我們需要使用的DOM部分。

定位器可以像元素的ID，元素的文本內(nèi)容或CSS選擇器，例如.blog-post甚至文章> Div.Container> Div> div> div> d> p：nth-??child（12）。關(guān)於可以將該元素識(shí)別為測(cè)試跑步者的元素的任何內(nèi)容都可以是定位器。從最後一個(gè)CSS選擇器中可以看出，定位器有許多品種。

我們經(jīng)常根據(jù)脆性或穩(wěn)定來評(píng)估定位者。通常，我們希望盡可能穩(wěn)定的元素定位器，以便我們的測(cè)試始終找到所需的元素，即使元素周圍的代碼隨著時(shí)間的流逝而變化。也就是說，不惜一切代價(jià)最大化穩(wěn)定性可能會(huì)導(dǎo)致防禦性測(cè)試編寫實(shí)際上會(huì)削弱測(cè)試。我們通過結(jié)合脆性和穩(wěn)定性的結(jié)合來獲得最大的價(jià)值，與我們希望的測(cè)試所關(guān)心的內(nèi)容保持一致。

這樣，元素定位器就像膠帶。他們應(yīng)該在一個(gè)方向上真的很堅(jiān)固，並在另一個(gè)方向上輕鬆撕裂。當(dāng)對(duì)應(yīng)用程序進(jìn)行不重要的更改時(shí)，我們的測(cè)試應(yīng)保持在一起並繼續(xù)通過，但是當(dāng)重要的更改發(fā)生與我們?cè)跍y(cè)試中指定的內(nèi)容相矛盾時(shí)，它們應(yīng)該很容易失敗。

前端測(cè)試中元素定位器的初學(xué)者指南

首先，讓我們假裝我們正在寫指示一個(gè)實(shí)際人來完成工作的指示。剛剛在Gate Inspectors，Inc。僱用了一名新的Gate檢查員。您是他們的老闆，在介紹每個(gè)人之後，您應(yīng)該給他們指示檢查他們的第一個(gè)門。如果您希望它們成功，您可能不會(huì)給他們寫這樣的筆記：

經(jīng)過黃色的房子，繼續(xù)前進(jìn)，直到您打到邁克的母親的朋友的山羊那時(shí)就失蹤了，然後向左轉(zhuǎn)，告訴我是否開著街對(duì)面的房子前面的大門。

這些方向有點(diǎn)像使用長(zhǎng)CSS選擇器或XPath作為定位器。這是脆弱的 - 這是“壞的脆弱”。如果黃房子被重新粉刷並重複步驟，您將無法找到大門，並且可能決定放棄（或在這種情況下，測(cè)試失?。?/p>

同樣，如果您不知道Mike的母親的朋友的山羊狀況，您將無法在正確的參考點(diǎn)停下來知道要檢查什麼門。這正是使“不好的脆性”壞的原因 - 測(cè)試可能會(huì)出於各種原因而破裂，而這些原因都與大門的可用性無關(guān)。

因此，讓我們進(jìn)行不同的前端測(cè)試，該測(cè)試要穩(wěn)定得多。畢竟，在該地區(qū)的法律上，給定道路上的所有大門都應(yīng)該來自製造商的獨(dú)特序列號(hào)：

使用序列號(hào)1234轉(zhuǎn)到大門，然後檢查是否打開。

這更像是通過其ID找到一個(gè)元素。它更穩(wěn)定，只是一個(gè)步驟。上次測(cè)試的所有故障點(diǎn)都已刪除。只有在該ID的門未按預(yù)期打開的情況下，此測(cè)試才會(huì)失敗。

現(xiàn)在，事實(shí)證明，儘管沒有兩個(gè)門在同一條道路上應(yīng)該具有相同的ID，但實(shí)際上並沒有在任何地方和一天都執(zhí)行，但道路上的另一個(gè)大門以相同的身份結(jié)束。

因此，下一次新僱的門檢查員去測(cè)試“門1234”時(shí)，他們首先發(fā)現(xiàn)另一個(gè)，現(xiàn)在正在訪問錯(cuò)誤的房屋並檢查錯(cuò)誤的事情。該測(cè)試可能會(huì)失敗或更糟：如果該門按預(yù)期工作，則測(cè)試仍然通過，但沒有測(cè)試預(yù)期的主題。它提供了錯(cuò)誤的信心。即使我們?cè)瓉淼哪繕?biāo)門在半夜被盜賊偷走了，它也會(huì)繼續(xù)通過。

在這樣的事件發(fā)生後，很明顯，ID並不像我們想像的那麼穩(wěn)定。因此，我們做了一些下一層次的思考，並決定在大門的內(nèi)部，我們想要一個(gè)特殊的ID來進(jìn)行測(cè)試。我們將派出一項(xiàng)技術(shù)，將特殊ID放在這條門上。新的測(cè)試說明看起來像這樣：

使用測(cè)試ID“ MyFauite Gate”進(jìn)入大門，然後檢查是否打開。

這就像使用流行的數(shù)據(jù)測(cè)試屬性。這樣的屬性很棒，因?yàn)樵诖a中很明顯，它們旨在通過自動(dòng)測(cè)試使用，不應(yīng)更改或刪除。只要門具有該屬性，您就會(huì)始終找到大門。就像ID一樣，唯一性仍然沒有強(qiáng)制執(zhí)行，但更有可能。

這距離您可以獲得的脆弱距離遠(yuǎn)遠(yuǎn)遙不可及，並且可以確認(rèn)大門的功能。除了我們故意添加用於測(cè)試的屬性外，我們不依賴任何東西。但是這裡隱藏了一些問題……

這是門的用戶界面測(cè)試，但是定位器是用戶無法使用該門的東西。

這是一個(gè)錯(cuò)過的機(jī)會(huì)，因?yàn)樵谶@個(gè)虛構(gòu)的縣，事實(shí)證明，大門必須在上面印有房屋號(hào)碼，以便人們可以看到地址。因此，所有大門都應(yīng)該具有獨(dú)特的面向人類的標(biāo)籤，如果沒有的話，這本身就是一個(gè)問題。

在使用測(cè)試ID定位大門時(shí)，如果事實(shí)證明大門已被重新粉刷並覆蓋了房屋號(hào)，我們的測(cè)試仍然會(huì)通過。但是大門的重點(diǎn)是讓人們進(jìn)入房屋。換句話說，用戶找不到的工作門仍然應(yīng)該是測(cè)試故障，我們希望能夠揭示此問題的定位器。

這是該測(cè)試檢查員在第一天的測(cè)試指令上的另一項(xiàng)通行證：

前往大門40號(hào)房屋，檢查是否打開。

該使用一個(gè)定位器為測(cè)試增值：這取決於用戶也取決於某些東西，這是Gate的標(biāo)籤。它增加了一個(gè)潛在的原因，即測(cè)試在達(dá)到我們要實(shí)際測(cè)試的相互作用之前失敗，這乍一看似乎很糟糕。但是在這種情況下，由於定位器從用戶的角度有意義，因此我們不應(yīng)該將其聳聳肩，因?yàn)樗恰按嗳醯摹?。如果該大門無法通過其標(biāo)籤找到，那麼它是否打開並不重要 - 這是“脆性的好”。

DOM很重要

許多前端測(cè)試建議都告訴我們避免寫作依賴DOM結(jié)構(gòu)的定位器。這意味著開發(fā)人員可以隨著時(shí)間的推移來重構(gòu)組件和頁面，並讓測(cè)試確認(rèn)面向用戶的工作流程沒有破壞，而無需更新測(cè)試即可趕上新結(jié)構(gòu)。這個(gè)原則很有用，但是我會(huì)有所調(diào)整要說的是，我們應(yīng)該避免寫作依賴於前端測(cè)試中無關(guān)的DOM結(jié)構(gòu)的定位器。

為了使應(yīng)用程序正確函數(shù)，DOM應(yīng)反映在任何給定時(shí)間屏幕上內(nèi)容的性質(zhì)和結(jié)構(gòu)。原因之一是可訪問性。從這個(gè)意義上講，正確的DOM可以使輔助技術(shù)正確解析並向未看到瀏覽器呈現(xiàn)的內(nèi)容的用戶進(jìn)行描述更容易。 DOM結(jié)構(gòu)和普通的舊HTML對(duì)依靠輔助技術(shù)的用戶的獨(dú)立性產(chǎn)生了巨大的影響。

讓我們旋轉(zhuǎn)前端測(cè)試，以提交某些內(nèi)容，以提交我們應(yīng)用程序的聯(lián)繫表。我們將使用柏樹為此，但是選擇定位器的原則在戰(zhàn)略上適用於使用DOM來定位元素的所有前端測(cè)試框架。在這裡，我們找到元素，輸入一些測(cè)試，提交表格並驗(yàn)證“感謝”狀態(tài)：

 //？不建議
cy.get（'＃名稱'）。類型（'mark'）
cy.get（'＃comment'）。類型（'test評(píng)論'）
cy.get（'。submit-btn'）。click（）
cy.get（'。謝謝你'）。應(yīng)該（'be.visible'）

這四行中發(fā)生了各種隱式斷言。 cy.get（）正在檢查該元素是否存在於DOM中。如果元素在一定時(shí)間之後不存在，則測(cè)試將失敗，而諸如類型的操作並單擊驗(yàn)證元素是否在採(cǎi)取操作之前可見，啟用和毫無疑問。

因此，即使在這樣的簡(jiǎn)單測(cè)試中，我們也會(huì)獲得很多“免費(fèi)”，但是我們還對(duì)我們（和我們的用戶）並不真正在乎的事情介紹了一些依賴性。我們正在檢查的特定ID和類似乎足夠穩(wěn)定，尤其是與Div.main> p：nth-??child（3）> span.is-a-a-button之類的選擇器相比。這些長(zhǎng)的選擇器是如此具體，以至於對(duì)DOM的次要更改可能會(huì)導(dǎo)致測(cè)試失敗，因?yàn)?em>它找不到元素，而不是因?yàn)楣δ芤褤p壞。

但是，即使是我們的簡(jiǎn)短選擇器，例如#NAME，也遇到了三個(gè)問題：

1. 可以在代碼中更改或刪除ID，從而導(dǎo)致元素被忽略，尤其是如果表單可能不止一次出現(xiàn)在頁面上時(shí)。每個(gè)實(shí)例可能需要生成一個(gè)唯一的ID，這不是我們可以輕鬆地預(yù)填充測(cè)試的東西。
2. 如果頁面上有一個(gè)以上的表單實(shí)例並且它們具有相同的ID，我們需要確定要填寫哪種表單。
3. 從用戶的角度來看，我們實(shí)際上不在乎ID是什麼，因此所有內(nèi)置斷言都是……沒有完全利用？

對(duì)於第一和第二問題，建議的解決方案通常是使用HTML中專門的數(shù)據(jù)屬性，這些屬性僅用於測(cè)試。這是更好的，因?yàn)槲覀兊臏y(cè)試不再取決於DOM結(jié)構(gòu)，並且隨著開發(fā)人員修改組件周圍的代碼，只要將數(shù)據(jù)測(cè)試保留在右輸入元素上，測(cè)試就會(huì)繼續(xù)通過而無需更新，而無需更新。

不過，這並不能解決問題三 - 我們?nèi)匀挥幸粋€(gè)前端交互測(cè)試，該測(cè)試取決於對(duì)用戶毫無意義的事物。

互動(dòng)元素有意義的定位器

當(dāng)元素定位器依賴我們實(shí)際想要依靠的東西時(shí)，它們是有意義的，因?yàn)橛嘘P(guān)定位器對(duì)用戶體驗(yàn)很重要。在交互元素的情況下，我認(rèn)為使用的最佳選擇器是該元素的可訪問名稱。這樣的東西是理想的：

 //？受到推崇的
cy.getByLabelText（'name'）。類型（'mark'）

此示例使用柏樹測(cè)試庫(kù)中的副詞架。 （實(shí)際上，如果您以任何形式使用測(cè)試庫(kù)，它可能已經(jīng)在幫助您像這樣編寫可訪問的定位器。）

這很有用，因?yàn)楝F(xiàn)在內(nèi)置檢查（我們通過CY.Type（）命令免費(fèi)獲得）包括表單字段的可訪問性。所有互動(dòng)元素都應(yīng)具有接觸輔助技術(shù)的可訪問名稱。例如，ScreenReader用戶會(huì)知道他們輸入的表單字段的方式是為了輸入所需的信息。

為表單字段提供此可訪問名稱的方法通常是通過與該字段相關(guān)聯(lián)的標(biāo)籤元素。來自柏樹測(cè)試庫(kù)的getBylabelText命令驗(yàn)證了該字段是否適當(dāng)標(biāo)記，但該字段本身是允許具有標(biāo)籤的元素。因此，例如，以下HTML在嘗試（）命令之前都將正確失敗，因?yàn)榧词勾嬖跇?biāo)籤，標(biāo)記Div是無效的HTML：

 
可編輯的div元素：
<div contenteaditable="“" true></div>

由於這是無效的HTML，因此ScreenReader軟件永遠(yuǎn)無法正確將此標(biāo)籤與此字段相關(guān)聯(lián)。為了解決此問題，我們將更新標(biāo)記以使用真實(shí)的輸入元素：

 
真實(shí)輸入：

這很棒?，F(xiàn)在，如果在對(duì)DOM進(jìn)行編輯後，此時(shí)測(cè)試失敗了，這並不是因?yàn)榻Y(jié)構(gòu)無關(guān)緊要，而不是安排元素的方式，而是因?yàn)?em>我們的編輯做了一些破壞DOM的部分，而我們的前端測(cè)試顯式關(guān)心，這實(shí)際上對(duì)用戶很重要。

非相互作用元素有意義的定位器

對(duì)於非交互元素，我們應(yīng)該戴上思維上限。讓我們?cè)诨氐綌?shù)據(jù)-CY或數(shù)據(jù)測(cè)試屬性之前先使用一些判斷，如果DOM根本不重要，它將永遠(yuǎn)在我們身邊。

在我們浸入通用定位器之前，讓我們記住：DOM的狀態(tài)是我們作為Web開發(fā)人員的整個(gè)事物?（至少，我認(rèn)為是）。 DOM為沒有視覺上頁面的每個(gè)人驅(qū)動(dòng)UX。因此，很多時(shí)候，我們可能會(huì)在代碼中使用或應(yīng)該在測(cè)試定位器中包含一些有意義的元素。

如果沒有，因?yàn)椤＜僭O(shè)應(yīng)用程序代碼是所有通用容器，例如DIV和SPAN，我們應(yīng)該在添加測(cè)試時(shí)先考慮首先修復(fù)應(yīng)用程序代碼。否則，實(shí)際上有測(cè)試的風(fēng)險(xiǎn)實(shí)際上指定了通用容器的期望和期望，這使得某人更難修改該組件更容易訪問。

此主題為組織中可訪問性的工作方式打開了一罐蠕蟲。通常，如果沒有人在談?wù)撍?，而不是我們公司?shí)踐的一部分，那麼我們就不會(huì)認(rèn)真對(duì)待可訪問性作為前端開發(fā)人員。但是歸根結(jié)底，我們應(yīng)該是設(shè)計(jì)的“正確標(biāo)記”的專家，以及在決定這一點(diǎn)時(shí)要考慮的事情。我在Connect.Tech 2021中討論了更多的事情，稱為“研究和寫作可訪問的Vue…Thingies”。

正如我們?cè)谏厦婵吹降哪菢?，傳統(tǒng)上我們認(rèn)為互動(dòng)的要素，有一個(gè)很好的經(jīng)驗(yàn)法則很容易在我們的前端測(cè)試中構(gòu)建：交互式元素應(yīng)該具有與元素正確關(guān)聯(lián)的可感知標(biāo)籤。因此，當(dāng)我們對(duì)其進(jìn)行測(cè)試時(shí)，任何交互式都應(yīng)使用所需標(biāo)籤從DOM中選擇。

對(duì)於我們不認(rèn)為是交互式的元素（就像大多數(shù)內(nèi)容渲染的元素一樣，除了Main之類的一些基本地標(biāo)之外，我們都不會(huì)觸發(fā)任何燈塔審計(jì)失敗，如果我們將大部分非相互作用內(nèi)容放入通用DIV或跨度容器中。但是，標(biāo)記對(duì)輔助技術(shù)的信息和幫助並不是很有幫助，因?yàn)樗鼪]有向看不到它的人描述內(nèi)容的性質(zhì)和結(jié)構(gòu)。 （要看到這一點(diǎn)，請(qǐng)查看Manuel Matuzovic的出色博客文章：“建立最不可能的網(wǎng)站，並以完美的燈塔得分?！保?/p>

我們渲染的HTML是我們向任何不視覺上感知內(nèi)容的人傳達(dá)重要上下文信息的地方。 HTML用於構(gòu)建DOM，DOM用於創(chuàng)建瀏覽器的可訪問性樹，可訪問性樹是各種輔助技術(shù)可以用來表達(dá)內(nèi)容的API，可以使用我們的軟件來表達(dá)內(nèi)容和可以採(cǎi)取的操作。 ScreenReader通常是我們想到的第一個(gè)示例，但是可訪問性樹也可以由其他技術(shù)使用，例如將網(wǎng)頁變成盲文等的顯示。

自動(dòng)化可訪問性檢查不會(huì)告訴我們我們是否真的為內(nèi)容創(chuàng)建了正確的HTML。 HTML的“正確性”我們正在向開發(fā)人員發(fā)出有關(guān)在可訪問性樹中需要傳達(dá)哪些信息的開發(fā)人員。

一旦打了電話，我們就可以決定其中多少適合烘烤到自動(dòng)的前端測(cè)試中。

假設(shè)我們已經(jīng)決定，一個(gè)具有狀態(tài)ARIA角色的容器將持有“謝謝”和錯(cuò)誤消息傳遞聯(lián)繫表。這可能很好，因此ScreenReader可以宣布表格成功或失敗的反饋。可以應(yīng)用.Thank-you和.error的CSS類來控制視覺狀態(tài)。

如果我們添加此元素並想為其編寫UI測(cè)試，則在測(cè)試填寫表格並將其提交後，我們可能會(huì)編寫這樣的斷言：

 //？不建議
cy.get（'。謝謝你'）。應(yīng)該（'be.visible'）

甚至是使用非脆性但仍然毫無意義的選擇器的測(cè)試：

 //？不建議
cy.get（'[data-Test]'）。應(yīng)該（'be.visible'）

兩者都可以使用cy.contains（）重寫：

 //？受到推崇的
cy.contains（'[cool =“ status”]'，'，謝謝，我們收到了您的消息'）
  。

這將確認(rèn)預(yù)期的文本出現(xiàn)並在正確的容器中。與先前的測(cè)試相比，這在驗(yàn)證實(shí)際功能方面具有更大的價(jià)值。如果此測(cè)試的任何部分失敗，我們想知道，因?yàn)橄⒑驮剡x擇器對(duì)我們很重要，不應(yīng)瑣碎地更改。

我們肯定在這裡獲得了一些覆蓋範(fàn)圍，沒有很多額外的代碼，但是我們也引入了另一種脆弱性。我們的測(cè)試中有簡(jiǎn)單的英語字符串，這意味著，如果“感謝”信息會(huì)更改為“謝謝您伸出手！”之類的東西。該測(cè)試突然失敗了。與所有其他測(cè)試相同。對(duì)標(biāo)籤的編寫方式的一個(gè)很小的更改將需要更新使用該標(biāo)籤的元素的任何測(cè)試。

我們可以通過在前端測(cè)試中使用相同的真實(shí)來源來改善這一點(diǎn)，與我們?cè)诖a中所做的相同。而且，如果我們目前在組件的HTML中嵌入了可讀的句子……那麼，現(xiàn)在我們有理由將這些東西從那里拉出。

人類可讀的字符串可能是UI代碼的魔術(shù)數(shù)字

一個(gè)神奇的數(shù)字（或較少引起的“未命名數(shù)值常數(shù)”）是您有時(shí)在代碼中看到的超特定值對(duì)計(jì)算的最終結(jié)果很重要，例如一個(gè)好的舊1.023033或其他東西。但是由於這個(gè)數(shù)字沒有標(biāo)記，因此其意義尚不清楚，因此目前尚不清楚它在做什麼。也許它適用稅收。也許它補(bǔ)償了我們不知道的一些錯(cuò)誤。誰知道？

無論哪種方式，前端測(cè)試也是如此，一般建議是避免魔術(shù)數(shù)字，因?yàn)樗鼈內(nèi)狈η逦?。代碼評(píng)論通常會(huì)抓住它們，並詢問該號(hào)碼的目的。我們可以將其轉(zhuǎn)移到常數(shù)嗎？如果要重複使用多個(gè)位置，我們也會(huì)做同樣的事情。我們可以將其存儲(chǔ)在變量中並根據(jù)需要使用變量，而不是在任何地方重複該值。

多年來，編寫用戶界面，我來查看HTML或模板文件中的文本內(nèi)容與其他上下文中的魔術(shù)數(shù)字非常相似。我們通過我們的代碼將絕對(duì)價(jià)值??放置，但實(shí)際上，將這些值存儲(chǔ)在其他地方並在構(gòu)建時(shí)間（甚至通過API）將這些值存儲(chǔ)可能更有用。

有幾個(gè)原因：

1. 我曾經(jīng)與想要從內(nèi)容管理系統(tǒng)中驅(qū)動(dòng)所有內(nèi)容的客戶合作。內(nèi)容，甚至是形式的標(biāo)籤和狀態(tài)消息，都無法避免使用CMS。客戶需要完全控制，以便內(nèi)容更改不需要編輯代碼並重新部署網(wǎng)站。那是有道理的；代碼和內(nèi)容是不同的概念。
2. 我在許多多語言代碼庫(kù)中工作，在這些代碼庫(kù)中，所有文本都需要通過一些國(guó)際化框架來吸入：

 
  
  {{content [currentlanguage] .contactform.name}}}

3. 就前端測(cè)試而言，我們的UI測(cè)試更加可靠，而不是檢查我們的測(cè)試中的特定“謝謝”消息，而是做類似的事情：

 const text = content.en.contactfrom //我們將進(jìn)行一次，並且文件中的所有測(cè)試都可以從中讀取

cy.contains（text.nemelabel，'[remo =“ status”]'）。應(yīng)該（'be.visible'）

每種情況都是不同的，但是在編寫強(qiáng)大的UI測(cè)試時(shí)，擁有一定的字符串常數(shù)是一項(xiàng)巨大的資產(chǎn)，我建議這樣做。然後，如果以及何時(shí)對(duì)我們的情況需要翻譯或動(dòng)態(tài)內(nèi)容，那麼我們?yōu)榇俗龊昧烁玫臏?zhǔn)備。

我也聽說過反對(duì)在測(cè)試中導(dǎo)入文本字符串的好論點(diǎn)。例如，如果測(cè)試本身獨(dú)立於內(nèi)容源指定預(yù)期內(nèi)容，則某些發(fā)現(xiàn)測(cè)試更可讀性，並且通常更好。

這是一個(gè)公平的觀點(diǎn)。我對(duì)此的說服力不大，因?yàn)槲艺J(rèn)為應(yīng)該通過更多的社論審查/發(fā)布模型來控制內(nèi)容，並且我希望測(cè)試檢查源的預(yù)期內(nèi)容是否得到了渲染，而不是一些在編寫測(cè)試時(shí)正確的特定字符串。但是很多人在這方面不同意我的意見，我說只要在一個(gè)團(tuán)隊(duì)中，權(quán)衡就可以理解，這兩種選擇都是可以接受的。

也就是說，將代碼與前端的內(nèi)容隔離開來仍然是一個(gè)好主意。有時(shí)，混合和匹配甚至可能是有效的 - 就像在我們的組件測(cè)試中導(dǎo)入字符串，而不是在我們的端到端測(cè)試中導(dǎo)入它們。這樣，我們節(jié)省了一些重複，並獲得了信心，即我們的組件顯示正確的內(nèi)容，同時(shí)仍進(jìn)行了前端測(cè)試，這些測(cè)試以編輯，面向用戶的意義獨(dú)立主張預(yù)期的文本。

何時(shí)使用數(shù)據(jù)測(cè)試定位器

[data-test =“ Success-Message”]之類的CSS選擇器仍然很有用，並且在有意使用的情況下使用，而不是一直使用。如果我們的判斷是沒有有意義的，可訪問的方法來定位元素，那麼數(shù)據(jù)測(cè)試屬性仍然是最佳選擇。它們比例如巧合的巧合要好得多，就像您在編寫測(cè)試的那天碰巧發(fā)生的任何DOM結(jié)構(gòu)一樣，然後回到“第三個(gè)Div中的第二個(gè)列表中的第二個(gè)列表中，具有一類卡片”樣式的測(cè)試樣式。

有時(shí)候，期望內(nèi)容具有動(dòng)態(tài)性，並且沒有辦法輕鬆地從某些共同的真理來源中獲取字符串，以便在我們的測(cè)試中使用。在這些情況下，數(shù)據(jù)測(cè)試屬性有助於我們達(dá)到我們關(guān)心的特定元素。例如，它仍然可以與可訪問性友好的斷言結(jié)合在一起：

 cy.get（'h2 [data-test =“ intro-subheading”]'）

在這裡，我們想找到什麼具有介紹性數(shù)據(jù)測(cè)試屬性的內(nèi)容，但仍然允許我們的測(cè)試斷言，如果我們希望它是H2元素，則應(yīng)該是H2元素。數(shù)據(jù)測(cè)試屬性用於確保我們獲得我們感興趣的特定H2，而不是網(wǎng)頁上可能存在的其他H2，如果由於某種原因，該H2的內(nèi)容在測(cè)試時(shí)就無法知道。

即使在我們確實(shí)知道內(nèi)容的情況下，我們?nèi)钥赡苁褂脭?shù)據(jù)屬性來確保應(yīng)用程序在正確的位置呈現(xiàn)：

 cy.contains（'H2 [data-test =“ intro-subheading”]'，'歡迎進(jìn)行測(cè)試！'）

數(shù)據(jù)測(cè)試選擇器也可以方便地到達(dá)頁面的某個(gè)部分，然後在其中做出斷言。這看起來如下：

 cy.get（'Artical [data-test =“ ablum-card-blur-great-escape”]'）。在（（）=> {
  cy.contains（'H2'，“大逃生”）。應(yīng)該（'Be.be Visible'）
  Cy.Contains（'P'，'1995專輯Blur'）。應(yīng)該（'Be.visible'）
  cy.get（'[data-test =“ stars”]'）。
}））

到那時(shí)，我們陷入了一些細(xì)微差別，因?yàn)榭赡苓€有其他瞄準(zhǔn)此內(nèi)容的好方法，這只是一個(gè)例子。但是歸根結(jié)底，如果擔(dān)心這樣的細(xì)節(jié)，這是一個(gè)很好的選擇，因?yàn)橹辽傥覀儗?duì)HTML中嵌入的可訪問性功能有所了解，並且我們希望將這些功能包括在測(cè)試中。

當(dāng)DOM重要時(shí)，測(cè)試

如果我們對(duì)如何講述測(cè)試如何與哪些元素進(jìn)行互動(dòng)以及期望的內(nèi)容有什麼想法，前端測(cè)試為我們帶來了更多的價(jià)值。如果這些內(nèi)容與功能相關(guān)，我們應(yīng)該更喜歡可訪問的名稱而不是目標(biāo)交互式組件，並且應(yīng)包含特定的元素名稱，ARIA角色等（ARIA角色等）。這些定位者在實(shí)用的情況下創(chuàng)造了力量和脆弱的正確組合。

當(dāng)然，對(duì)於其他所有內(nèi)容，都有數(shù)據(jù)測(cè)試。

以上是最大化您的前端測(cè)試定位器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！