web-dev-qa-db-ja.com

ヒノキを使用して反応選択ドロップダウンリストオプションを選択

誰かがサイプレステストの反応選択ドロップダウンリストからオプションを選択する方法を知っていますか？

私はたくさんのものを試しましたが、役に立ちませんでした。

React-selectは隠し入力を使用しているようです。そのヒノキは書き込めません。また、サイプレスもdivに書き込むことができません。

また、開いていないため、開発ツールで実際のドロップダウンリストを検査する方法がわからないことも役に立ちません。

使っています：

  • 反応選択v2.4.1
  • サイプレスv3.1.5

編集1：

@bkuceraの回答が機能します。私が結んだ作業コードは：

_it('updates Person', () => {
    cy.get('[data-id=bearbeiter]')
      .find('.css-10nd86i')
      .click()
      .find('input')
      .eq(1)
      .focus()
    cy.contains('Test Tester').click({ force: true })
  })
_

2つの入力があるように見えるので、findの後に.eq(1)を追加する必要がありました。

編集2：

上記の解決策は、私のサイトのナビゲーションツリーで、たまたま同じテキストが含まれている要素をクリックすることになりました。だから葉巻はない:-(

編集3：

私もこの解決策を試しました：

_Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input')
    .eq(1)
    .focus()
    .type(value, { force: true })
})
_

...しかし、_force: true_が使用されていても、次のエラーが発生します。

_The element typed into was:

  > <input name="aeId" type="hidden" value="862333db-31cf-444c-b8ea-021c640c7a44">

Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements.
_

編集4：

これまでのところ、これが最もうまくいきました：

_Cypress.Commands.add('setSelectOption', ({ selector, option, value }) => {
  cy.get(selector)
    .find('.css-10nd86i input:text')
    .focus()
    .type(option, { force: true, delay: 600, timeout: 330000 })
    .type('{enter}', { force: true })
  cy.get(selector)
    .find('.css-10nd86i')
    .find('input')
    .eq(1)
    .should('have.value', value)
})
_

少なくとも、短いリストでは機能します。テキストの入力が遅い。私たちの種リスト（7000ロング）について、それらのdelayおよびtimeoutオプションを追加しました。遅延は役立つようですが、これらのオプションが動作にどのように影響するかを正確に理解できていません。そして、時にはヒノキがタイムアウトする:-(

編集5：

一方（react-select v3.0.4、cypress v3.3.2）すべてのテストは次の理由で失敗します：

_Expected to find element '.css-10nd86i' but never found it
_

クラスが変わったと思います。そのようなもろい解決策で驚くことではない:-(

cypressreact-select
8
Alex

最初にクリックして反応選択ドロップダウンを開き、次に開きたい実際の要素をクリックする必要があります。そのためにこの構文を使用します。

cy.get('.s3p-react-select__indicator').eq(1)
  .click()
cy.get('[id^="react-select-"]').contains('<value_dropdownbox>')
  .click()

そして実際には非表示の入力フィールドを使用します。非表示の入力フィールドを見つけるには、developertoolsを開き、要素を選択して「input [type = 'hidden']」を探します。

最後に、あなたの最新の質問に対する答え：

また、開いていないため、開発ツールで実際のドロップダウンリストを検査する方法がわからないことも役に立ちません。

React Chrome用の開発者プラグインを選択してください： https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Chrome開発者ツールを開いている場合は、Reactタブをクリックします。次に、React要素を右クリックし、 inspect要素を選択します。その要素に対して実行できるすべてのオプションが表示されます。ただし、正しい要素を一度に選択しない可能性があるため、チェックボックス「menuIsOpen」で要素を探してチェックします。何かが変更されるまで、ドロップダウンは開いたままになりますページ

1
Mr. J.

サイプレス4.2.0および反応選択3.0.8では、Enterキーを2回押すとうまくいきます。

cy.get('#react-select-component-id').type('Something{enter}{enter}');
0
Mark Jackson

IDをreact-selectに渡して、次のように見つけます。

    cy.get('#country').within($el => {
    cy.wrap($el)
        .click()
        .find('div[tabindex*="-1"]')
        .first()
        .click();
    });

したがって、最初に要素内でクエリを実行し、それをラップしてクリックイベントを発生させ、次にすべての要素が持つデータプロップの1つを使用します。すべての要素がそれを持っているので、tabindex -1を使用しました。特定の必要がある場合はeq（x）を使用します素子。

0
Goran Jakovljevic

私の場合、これは役に立ちました：

cy.get("[for=country]")
        .click() 
        .type("Poland{enter}");

しかし、私はラベルをクリックしていることを覚えておいてください。

0
Marcin

サイプレス4.2.0を使用しています。次のチェーンコマンドを実行できます。

Cypress.Commands.add('selectDropdownlist', (dropDownSelectionId) => {
cy.get('[data-id=bearbeiter]').click({force: true})
.get(`[id="${dropDownSelectionId}"]`).click() //the id or any selector of the value 'Test Tester'
})
0
ebanster

こんにちは私はここでこの解決策を得ました：

"cypress": "^3.4.1"
"react-select": "^2.4.3"

cy
 .get('[class*="-control"]')
 .click(0, 0, { force: true })
 .get('[class*="-menu"]')
 .find('[class*="-option"]')
 .eq(2)
 .click(0, 0, { force: true })
0
Airton