無法在 cypress 中找到定位器

Question

試圖弄清楚如何在 cypress 中找到定位器：我正在嘗試為 Select avenue 找到定位器

在此處輸入圖片說明

<input type="text" autocomplete="off" id="0ecd2cea-d327-4c15-bdb0-591619f4674c" value="" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;">

這是我的 html 代碼：

    <span style="color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;; font-size: 14px; font-weight: 600;">Select a Venue</span>

I am not able to use id because it is dynamic.In selenium there is a way to do it going from parent to child element. How can i do similar in cypress? for example - finding the span text = Select a venue then finding its text box


Here is the full html code:

<div class="jss295"><div class="jss277"><div class="" style="flex: 1 1 auto; display: flex; flex-direction: row;"><div class="jss278" style="flex: 1 1 auto; display: flex; flex-direction: column;"><div class="jss66"><label class="jss302 jss296 jss297 jss300 jss299" data-shrink="true" for="5afa951b-7e02-4e0b-a446-e3e09b355825">First Name</label><div class="jss201 jss202"><input class="jss210 jss213" id="5afa951b-7e02-4e0b-a446-e3e09b355825" name="firstName" type="text" aria-required="false" aria-invalid="false" value="" style="padding: 8px;"></div></div></div><div class="jss278" style="flex: 1 1 auto; display: flex; flex-direction: column;"><div class="jss66"><label class="jss302 jss296 jss297 jss300 jss299" data-shrink="true" for="17b2fe19-df71-4da3-b095-44c23a3bb7df">Last Name</label><div class="jss201 jss202"><input class="jss210 jss213" id="17b2fe19-df71-4da3-b095-44c23a3bb7df" name="lastName" type="text" aria-required="false" aria-invalid="false" value="" style="padding: 8px;"></div></div></div></div><div class="jss278" style="flex: 1 1 auto; display: flex; flex-direction: column;"><div class="jss66"><label class="jss302 jss296 jss297 jss300 jss299" data-shrink="true" for="2242035f-7235-4e4d-90c8-5ebd26c09452">Email</label><div class="jss201 jss202"><input class="jss210 jss213" id="2242035f-7235-4e4d-90c8-5ebd26c09452" name="email" type="text" aria-required="false" aria-invalid="false" value="" style="padding: 8px;"></div></div></div><div class="" style="flex: 1 1 auto; display: flex; flex-direction: column; margin-right: 16px; margin-bottom: 24px;"><div class="mui-select"><span style="color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;; font-size: 14px; font-weight: 600;">Select a Venue</span><div style="font-size: 16px; line-height: 24px; width: 100%; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: text; border-radius: 4px; border: 1px solid rgb(229, 230, 235); margin-bottom: 36px; padding-bottom: 8px; margin-top: 8px;"><div><div style="margin-top: 0px;"></div></div><div style="display: flex; position: relative; width: 256px; padding: 0px 8px; margin: 0px; font: inherit; height: 32px; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left; min-height: 32px; flex-wrap: nowrap;"><div style="font-size: 16px; line-height: 24px; width: 256px; height: 48px; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: auto;"><input type="text" autocomplete="off" id="8d0b19a8-7d46-46f5-b520-3cadb79c305b" value="" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;"></div><div style="display: none;"></div></div><div><hr aria-hidden="true" style="border-top: none rgb(224, 224, 224); border-left: none rgb(224, 224, 224); border-right: none rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none;"><hr aria-hidden="true" style="border-top: none rgb(74, 193, 192); border-left: none rgb(74, 193, 192); border-right: none rgb(74, 193, 192); border-bottom: 2px solid rgb(74, 193, 192); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none; transform: scaleX(0); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"></div></div></div></div><div class="" style="flex: 1 1 auto; display: flex; flex-direction: column; margin-right: 16px; margin-bottom: 24px;"><div class="mui-select"><span style="color: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;; font-size: 14px; font-weight: 600;">Select a brand</span><div style="font-size: 16px; line-height: 24px; width: 100%; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: text; border-radius: 4px; border: 1px solid rgb(229, 230, 235); margin-bottom: 36px; padding-bottom: 8px; margin-top: 8px;"><div><div style="margin-top: 0px;"></div></div><div style="display: flex; position: relative; width: 256px; padding: 0px 8px; margin: 0px; font: inherit; height: 32px; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: initial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left; min-height: 32px; flex-wrap: nowrap;"><div style="font-size: 16px; line-height: 24px; width: 256px; height: 48px; display: inline-block; position: relative; background-color: transparent; font-family: Helvetica, &quot;Open Sans&quot;; transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: auto;"><input type="text" autocomplete="off" id="0e376717-85ff-4cf7-b7c5-e795b5d100fe" value="" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;"></div><div style="display: none;"></div></div><div><hr aria-hidden="true" style="border-top: none rgb(224, 224, 224); border-left: none rgb(224, 224, 224); border-right: none rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none;"><hr aria-hidden="true" style="border-top: none rgb(74, 193, 192); border-left: none rgb(74, 193, 192); border-right: none rgb(74, 193, 192); border-bottom: 2px solid rgb(74, 193, 192); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none; transform: scaleX(0); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"></div></div></div></div><div class="jss278" style="flex: 1 1 auto; display: flex; flex-direction: column;"><label class="jss306"><span class="jss96 jss317 jss312 jss314 jss309"><span class="jss323"><svg class="jss216 jss324" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg><input type="checkbox" class="jss313" value=""></span></span><span class="jss120 jss129 jss308">Read only</span></label></div><div class="" style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding-right: 16px;"><button tabindex="-1" class="jss96 jss97 jss144 jss150 jss156 f1j6pgoy" type="button" disabled=""><span class="jss146"><p class="jss120 jss129 fitb9kk">Add User</p></span></button></div></div></div>

Answer 1

您可以使用cy.get通過 id 值查找輸入。 因此，對於您提供的示例輸入，您可以使用：

cy.get('#0ecd2cea-d327-4c15-bdb0-591619f4674c') 

並繼續您的測試。 如果該 id 值是動態確定的，您可以只給它一個類值（例如， class="venue-input" ）並使用

cy.get('.venue-input') 

有關選擇文本輸入的更多信息，您還可以查看此視頻。