Styjun

Miss Toad and her frogs

Symbol for "not absolutely continuous" in Latex

Is there a nice way to assign std::minmax(a, b) to std::tie(a, b)?

Did Wakanda officially get the stuff out of Bucky's head?

3D nonogram, beginner's edition

Can I ask to speak to my future colleagues before accepting an offer?

What could a reptilian race tell by candling their eggs?

Why was Mal so quick to drop Bester in favour of Kaylee?

How to formulate maximum function in a constraint?

Why are 120 V general receptacle circuits limited to 20 A?

Using aluminium busbar/cables in an aircraft instead of copper

What is the olden name for sideburns?

In native German words, is Q always followed by U, as in English?

Mean Value Theorem: Continuous or Defined?

Why do user defined scalar functions require the schema?

Sum of Parts of An Array - JavaScript

Wrong corporate name on employment agreement

Is there a category where products don't exist because uniqueness fails?

What is "oversubscription" in Networking?

Why does a brace command group need spaces after the opening brace in POSIX Shell Grammar?

Avoid using C Strings on C++ code to trim leading whitespace

What exactly is a fey/fiend/celestial spirit?

Java Optional working of orElse is not as if else

What does grep -v "grep" mean and do?

Cypress do something after click

How do I detect a click outside an element?Trigger a button click with JavaScript on the Enter key in a text boxHow to manage a redirect request after a jQuery Ajax callHow to append something to an array?React render a component on click after another react componentHow can I close a dropdown on click outside?Toggle a menu after clicking one of its options in ReactHow to access props and state of react-select HOCclick on element hidden due to md-backdrop classselect react-select dropdown list option using cypress

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have multiple components that contains react-select. I want to iterate through the components and get the values that are in react-select menu.

I tought It should work if I do it like this

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 $select.click( force: true ); 
 cy.get(".css-11unzgr").contains("option")
 )

But this doesn't work since the .css-11unzgr class appears only when it's parent element is clicked. However if I call .click() on $select element then dropdown menu won't even appear, if I call .click(multiple: true) directly on cy.get(".flight-segment-times .css-10nd86i") then every dropdown will sequentially open, but I need to be able to do something between those click actions.

javascript cypress react-select

share|improve this question

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe the class attributes - .css-10nd86i, .css-11unzgr are auto generated react components and must be dynamic for every reload. I would suggest your tests to get based on XPATH - e.g., cy.xpath('//div[contains('attrib', 'value')]'). Reference: github.com/cypress-io/cypress-xpath
  
  – Kondasamy Jayaraman
  Mar 26 at 2:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  They are auto generated but the names are still the same. Targeting .css-10nd86i works. I will look into that xpath command, but I think the problem is that after clicking on $select dropdown menu won!t open, so It is not generated by react
  
  – rtom
  Mar 26 at 8:47
  

  
  
  
  

add a comment | 

0

I have multiple components that contains react-select. I want to iterate through the components and get the values that are in react-select menu.

I tought It should work if I do it like this

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 $select.click( force: true ); 
 cy.get(".css-11unzgr").contains("option")
 )

But this doesn't work since the .css-11unzgr class appears only when it's parent element is clicked. However if I call .click() on $select element then dropdown menu won't even appear, if I call .click(multiple: true) directly on cy.get(".flight-segment-times .css-10nd86i") then every dropdown will sequentially open, but I need to be able to do something between those click actions.

javascript cypress react-select

share|improve this question

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe the class attributes - .css-10nd86i, .css-11unzgr are auto generated react components and must be dynamic for every reload. I would suggest your tests to get based on XPATH - e.g., cy.xpath('//div[contains('attrib', 'value')]'). Reference: github.com/cypress-io/cypress-xpath
  
  – Kondasamy Jayaraman
  Mar 26 at 2:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  They are auto generated but the names are still the same. Targeting .css-10nd86i works. I will look into that xpath command, but I think the problem is that after clicking on $select dropdown menu won!t open, so It is not generated by react
  
  – rtom
  Mar 26 at 8:47
  

  
  
  
  

add a comment | 

I have multiple components that contains react-select. I want to iterate through the components and get the values that are in react-select menu.

I tought It should work if I do it like this

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 $select.click( force: true ); 
 cy.get(".css-11unzgr").contains("option")
 )

But this doesn't work since the .css-11unzgr class appears only when it's parent element is clicked. However if I call .click() on $select element then dropdown menu won't even appear, if I call .click(multiple: true) directly on cy.get(".flight-segment-times .css-10nd86i") then every dropdown will sequentially open, but I need to be able to do something between those click actions.

javascript cypress react-select

share|improve this question

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 $select.click( force: true ); 
 cy.get(".css-11unzgr").contains("option")
 )

share|improve this question

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

share|improve this question

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

asked Mar 25 at 12:28

rtomrtom

30922 silver badges1818 bronze badges

2 Answers
2

active

oldest

votes

0

cy.each() (and other jquery-based commands) pass a jQuery collection to the callback, thus the .click() you are calling is actually a jQuery method, not a cypress command.

What you want to do is to cy.wrap() it first:

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 cy.wrap($select).click( force: true ); 
 cy.get(".css-11unzgr").contains("option");
 );

share|improve this answer

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried that but It doesn't work. The dropdown menu won't open, which is strange because as I have written in OP if I try to use click method on the result of get command on first line then every dropdown will open
  
  – rtom
  Mar 26 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Weird that it reacts to jQuery-triggered click, but not on cy.click. From my tests, the above works fine --- but I haven't tried it on react app.
  
  – dwelle
  Mar 26 at 10:30
  

  
  
  
  

add a comment | 

0

just make it like two actions:

cy.get(".flight-segment-times .css-10nd86i")
.click( force: true )
cy.get(".css-11unzgr")
.contains("option")

But since you have problems with actually opening the React-Select component you are probably clicking the wrong component. What I do is find the class that holds the 'onMouseDown' property (that class is in our application called 'react-select__control'. If I click that element it does open.

To find out which class has the 'onMouseDown' property I use the React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

share|improve this answer

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55337799%2fcypress-do-something-after-click%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

cy.each() (and other jquery-based commands) pass a jQuery collection to the callback, thus the .click() you are calling is actually a jQuery method, not a cypress command.

What you want to do is to cy.wrap() it first:

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 cy.wrap($select).click( force: true ); 
 cy.get(".css-11unzgr").contains("option");
 );

share|improve this answer

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried that but It doesn't work. The dropdown menu won't open, which is strange because as I have written in OP if I try to use click method on the result of get command on first line then every dropdown will open
  
  – rtom
  Mar 26 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Weird that it reacts to jQuery-triggered click, but not on cy.click. From my tests, the above works fine --- but I haven't tried it on react app.
  
  – dwelle
  Mar 26 at 10:30
  

  
  
  
  

add a comment | 

0

cy.each() (and other jquery-based commands) pass a jQuery collection to the callback, thus the .click() you are calling is actually a jQuery method, not a cypress command.

What you want to do is to cy.wrap() it first:

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 cy.wrap($select).click( force: true ); 
 cy.get(".css-11unzgr").contains("option");
 );

share|improve this answer

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried that but It doesn't work. The dropdown menu won't open, which is strange because as I have written in OP if I try to use click method on the result of get command on first line then every dropdown will open
  
  – rtom
  Mar 26 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Weird that it reacts to jQuery-triggered click, but not on cy.click. From my tests, the above works fine --- but I haven't tried it on react app.
  
  – dwelle
  Mar 26 at 10:30
  

  
  
  
  

add a comment | 

cy.each() (and other jquery-based commands) pass a jQuery collection to the callback, thus the .click() you are calling is actually a jQuery method, not a cypress command.

What you want to do is to cy.wrap() it first:

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 cy.wrap($select).click( force: true ); 
 cy.get(".css-11unzgr").contains("option");
 );

share|improve this answer

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

cy.get(".flight-segment-times .css-10nd86i")
 .each(($select) => 
 cy.wrap($select).click( force: true ); 
 cy.get(".css-11unzgr").contains("option");
 );

share|improve this answer

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

answered Mar 25 at 15:21

dwelledwelle

1,63211 gold badge1818 silver badges3434 bronze badges

0

just make it like two actions:

cy.get(".flight-segment-times .css-10nd86i")
.click( force: true )
cy.get(".css-11unzgr")
.contains("option")

But since you have problems with actually opening the React-Select component you are probably clicking the wrong component. What I do is find the class that holds the 'onMouseDown' property (that class is in our application called 'react-select__control'. If I click that element it does open.

To find out which class has the 'onMouseDown' property I use the React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

share|improve this answer

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

add a comment | 

0

just make it like two actions:

cy.get(".flight-segment-times .css-10nd86i")
.click( force: true )
cy.get(".css-11unzgr")
.contains("option")

But since you have problems with actually opening the React-Select component you are probably clicking the wrong component. What I do is find the class that holds the 'onMouseDown' property (that class is in our application called 'react-select__control'. If I click that element it does open.

To find out which class has the 'onMouseDown' property I use the React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

share|improve this answer

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

add a comment | 

just make it like two actions:

cy.get(".flight-segment-times .css-10nd86i")
.click( force: true )
cy.get(".css-11unzgr")
.contains("option")

But since you have problems with actually opening the React-Select component you are probably clicking the wrong component. What I do is find the class that holds the 'onMouseDown' property (that class is in our application called 'react-select__control'. If I click that element it does open.

To find out which class has the 'onMouseDown' property I use the React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

share|improve this answer

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

cy.get(".flight-segment-times .css-10nd86i")
.click( force: true )
cy.get(".css-11unzgr")
.contains("option")

share|improve this answer

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges

answered Mar 26 at 10:24

Mr. J.Mr. J.

49799 bronze badges