如何选择柏树自动完成字段

Question

如何在cypress中选择自动完成字段。

这是该字段的样子：

这是HTML代码：

<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(255, 96, 102); 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="b0d75317-769e-4d22-aa71-8ab86304b6d5" 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(244, 67, 54); border-left: none rgb(244, 67, 54); border-right: none rgb(244, 67, 54); border-bottom: 2px solid rgb(244, 67, 54); bottom: 8px; box-sizing: content-box; margin: 0px; position: absolute; width: 100%; display: none; transform: scaleX(1); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"></div><div style="position: absolute; bottom: -24px; font-size: 12px; line-height: 12px; color: rgb(244, 67, 54); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin-top: 16px;">This field is required</div></div></div>

Answer 1

一种方法是在downarrow命令中传递type键，然后使用click命令来获取值。我已经使用'jquery'网站测试了行为；在测试中尝试类似的方式

it('Test to grab the autoselect values', ()=> {
    cy.visit('https://jqueryui.com/autocomplete/');
    cy.get('iframe').then(($iframe)=>{
      const $input = $iframe.contents().find('body').find('div').find('input');
      let data = cy.wrap($input)
      data.type('JavaS');
      data.type('{downarrow}');
      data.type('{downarrow}').click();
    })
})