Cypress - hidden button because of scrollbar - automation

I have a problem. If I click on one button then it shows a little window where I need to click on another button. But it is hidden because that window is too small and needs to move with scrollbar. How should I click or move with that scrollbar and then click on the button?
If I try playground on that it takes full window.
Thank you for your answers.

Is that modal related to the width of the screen? If it is you can solve it by adding a new configuration for the viewport to cypress.json:
{
"viewportWidth": 1920,
"viewportHeight": 1280
}
And then of course to a width that is enough to solve your problem.
If that doesn't work, I believe this page can help you: https://docs.cypress.io/api/commands/scrollto.html#Scopes . The result will be something like this:
cy.get('modal_name')
.scrollTo('right')
Besides that I expected a cy.get() to still get the button you were looking for.

This is a very natural way of thinking whilst getting your element. However, imagine you are manually testing the screen above, you will have scroll in order to see and take action to the hidden element. Why should cypress be different?
It is important to transcript to your test, exactly the same actions you would do if manually executing the test. As a result, you should have a scrollIntoView action.

Related

i want to scroll a voew to right and click on 3 dots, sometimes automatically it detects the button, sometimes not

I have to scroll right in cypress for a specific view part. Sometimes it automatically detect, but sometimes after scroll only it detect the button. Scrollbar has no unique ID. What is the solution for this scenario?
I tried cy.scroll(500,0) but this dont work
You can get the element then use .scrollIntoView() chained to the returned element.
cy.get('#uniqueId')
.scrollIntoView()
// now it will be in current viewport

Why is my colorbox overlay not showing any controls?

I have included the colorbox css and js and it works when I click any image. However, I don't see any button/control on the overlay. It is only the image with dark overlay behind it. What could be going wrong here?
I am doing this in k15t Scroll Viewport for Confluence.
I tried changing the default script values but even that didn't help. Am I supposed to add the controls manually? I don't think so.
I would like to see the default close button along with slideshow effect, etc. that colorbox offers.
I figured it out. Though dumb but still. The default colorbox images (button icons) folder was residing at a location different from where colorbox expected it. So now, I can see the close button at least.
What still remains is - though I have set the colorbox properties right, I still don't see the previous and next buttons on a page with multiple images. What am I missing? It should have shown up by default...
Thank you.

Automatically scroll the view up when keyboard is shown in react-native

How can I automatically scroll the view up when I focus in a TextInput box and a keyboard is shown such that the TextInput box is not hidden behind the keyboard?
This question has been asked on StackOverflow a few times and I implemented the solution here which is the general solution advised in most of the answers. This solution works fine in the iPhone simulator but doesn't work on the actual phone. Has anyone else experienced this problem that the solution doesn't work on the actual phone?
Second thing that I noticed after adding this solution is that now if I am focussing in a TextInput box and keyboard is shown, if I press a button or try to focus into a different TextInput box, the first touch is always consumed to hide the keyboard and the button is not pressed or the other TextInput box is not focussed. It is a little annoying for the user to have to do the operation twice. Has anyone else observed this problem?
Please let me know if you have any inputs on how to solve these problems?
I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.
I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.

Any clue why these elements are being drawn in another view?

This strange behaviour happens when I have another window over my main window and perform a command that opens a modal popup in the main window. The outline of the selector and the Approved button are drawn in the modal window like the images show:
Where I think the elements are coming from:
However, if the window becomes out of focus and in focus again, the elements disappear.
Well, it seems I solved it. I don't know exactly why it was happening, but it probably had something to do with the multiple calls I was doing to - (void)drawRect:(NSRect)dirtyRect; in order to modify the selector border when hovering the mouse. Now I call my custom method, - (void)showBorder; which does only: self.layer.borderWidth = 1.0;.

jQuery Animate Toggle - Animation only works on second click

Task: I wanted to create a simple share button which extends to a share section (F,T,G,P) when clicked.
I failed to let the section slide out of the share button - what I really, really wanted - but managed to let a separate ul element slide out on the right side.
The animation worked… until I set the ul to hide initially via $('.networks').hide();
The sections is intended to only show up after a click, but now after the first click it just "pops open" ignoring the configured slide-out. Sliding only works in both directions (open and close) after clicking on it at least once .
I've uploaded an Example here at Codepen.io and as a jsFiddle.
Side note: the demos are behaving a little bit strange since they appear to only show a slide-in fx. The slide-out fx, with which we start, always looks like it pops open - that's not the case, it works after the second click, so you got to focus your eyes to see it (on a normal browser it visibly works better).
PS: Bonus points if you help me make this slide out of the "share" button. Be aware that I only have rudimentary knowledge of Javascript ( * duck and run * ).
Take a look at this fiddle link.
I changed the display property of the buttons to be inline-block instead of inline.
Elements with display inline can not have a width and i think it was the reason why jQuery was not able to animates the Elements width. I also animated the wrap around the ul instead of the ul.
EDIT: made a fast mockup of the thing sliding out of the button. Changed some css to be on the list elements itself instead of on the a elements, just work through the css and I think it will look ok.
edit forgot the link: link