typescript 如何选择cypress自动完成字段

xcitsw88 于 2022-12-14 发布在 TypeScript

关注(0)|答案(2)|浏览(130)

如何在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>

typescript

来源：https://stackoverflow.com/questions/55831736/how-to-select-cypress-autocomplete-field

2条答案

按热度按时间

ia2d9nvy1#

一种方法是在type命令中传递downarrow键，然后使用click命令获取值。在测试中尝试类似的方法

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();
    })
})

赞(0）回复(0）举报 2022-12-14

bqucvtff2#

谢谢你的这个想法。对我来说，它的工作方式是输入回车而不是点击。就像这样

this.elements.someAutocompleteField()
    .type(Cypress.env('TEXT TO FIND'))
    .type('{downarrow}')
    .type('{enter}');

赞(0）回复(0）举报 2022-12-14

我来回答

typescript 如何选择cypress自动完成字段

2条答案

相关问题

热门标签

最新问答