我有一個專案，其中一些組件（例如下拉選單）是用 React 撰寫的。
在這種情況下，我無法從下拉串列中選擇一個專案，因為 DOM 沒有顯示該下拉串列中的內容。
<div class="Select__control css-1s2u09g-control"><div class="Select__value-container css-1d8n9bt"><div class="Select__placeholder css-14el2xx-placeholder" id="react-select-6-placeholder">Select...</div><input id="react-select-6-input" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" aria-describedby="react-select-6-placeholder" class="css-1hac4vs-dummyInput" value=""></div><div class="Select__indicators css-1wy0on6"><div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span></span></div></div></div>
這種情況下如何進行端到端測驗？有人可以解釋或分享他們的經驗嗎？我沒有在互聯網上找到資訊。謝謝你
我在原始碼里找了這個組件，但是專案代碼中沒有帶react的檔案，這些組件在node_modules中，不清楚如何訪問這個下拉串列
uj5u.com熱心網友回復：
這看起來像react-select控制元件（根據類判斷）。
這種“觸發”行為使得很難找到選項，任何滑鼠操作后串列都會消失。
我這樣做的方式是
打開開發工具
右鍵選擇，點擊
inspect在devtools中找到單擊頁面上的選擇打開它，重復幾次打開和關閉，觀看devtools
devtools 中的一個元素在選單打開和關閉時出現和消失。該元素的格式如下：
<div id="react-select-6-listbox">，但 id 中的數字取決于頁面上使用的選擇數量。
我們現在知道了選項包裝器的 id，所以這是測驗代碼：
cy.get('.Select__control')
.parent() // the top-level of react-select
.click() // open the list
cy.get('[id^="react-select"][id$="listbox"]') // the injected options wrapper
.within(() => {
cy.contains('5 - May').click() // select an option
})
cy.get('.Select__control')
.find('.Select__placeholder')
.should('contain', '5 - May') // verify selected text
如果5 - May頁面上的文本是唯一的，您可以在打開下拉串列后選擇它，但.within()在包裝器上使用更安全。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/531973.html
標籤：反应测试柏反应选择
下一篇：如何處理物件內的行內函式的錯誤