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
Related
General question here not tied to a particular piece of code: I need to know the coordinates of an element in order to scroll down to it.
This element has a v-show condition and is hidden on page load, but user can click a button that will reveal the element (by satisfying the v-show condition).
Problem: if I immediately calculate the coordinates of the element when user clicks the button, I do NOT get the correct coordinates. I have to wait for a second or two with a setTimeout() to finally get the right coordinates.
Question: is there a way to make Vue do this as soon as possible, instead of making it wait some arbitrary length of time?
If you’re showing an element and then wanting to scroll to it, you could try using the nextTick callback:
// Set data that will show other element, i.e.
// this.showOtherElement = true;
// Use nextTick callback to scroll to element in the next tick
this.$nextTick().then(() => {
// Put code to scroll to element here
});
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.
I am developing a windows 8 app using JavaScript & HTML.
I have a page which has different sections laid horizontally. I have links for these sections in another page. I want the page to load from that specific section (meaning page should start from this section).
I am using a grid template and have a listview in the main page. When i click on any item in a group ,navigate to that page and come back to the main page. I want the main screen to load from the section that i have selected before.The screen should automatically scroll to that section like how it is happening from semantic zoom.
Any help in this regard will be of great use.
Thanks
For the first part, it should be enough to set the scrollLeft property of the container to the offsetLeft property of the element you want to scroll to.
The second part can be achieved by storing the scrollPosition attribute of the ListView before navigating away and setting it to its old value after navigating back.
As Ma_li said, scroll-left is one solution -- especially for non ListView content. The key here is how much of the experience you want to maintain when navigating back. One option (again, for non-listview content) is to find the element you want to be onscreen, and calling scrollIntoView on the element. However, this only brings the item on screen -- it won't bring it all the way to the left (or right, for BIDI languages), it scrolls just enough to et the whole element on screen.
For ListViews, you should use the indexOfFirstVisibleItem (or, indexOfLastVisibleItem) to scroll the listview to the correct location. This is key, because the listview is a virtualized control, this provides the most accurate & reliable method for scrolling the listview position.
Thanks Dominic & ma_il
I tried document.getElementBy("Id").focus() for the 1st Question and it worked. But i am getting a problem in this.
I have four divs Horizontally say "divA divB divC divD"
Data for the divA is coming from cloud. When i click on the link for divD in the main screen. it is not taking me to the corresponding section for the first time as it takes some time to load the divA. when click on the link for divD second time, it takes to the respective section. It is working if i use setInterval() but the DivA is shown for few seconds when the page loads and then scrolls to divD which is not good.
In my app, I have a text field that works fine, however after going back to the main menu and then back onto the page with the text field, the text field becomes un-touchable, the keyboard does not show no matter how many times you click it.
Here is a screen shot of the interface http://tinypic.com/view.php?pic=y11sm&s=6
I think I may have to add code or connect an action with the text field, but how?
Thanks for your time.
You can remove subviews that you don't use anymore like #Kim has already told you or if you need these subviews but they are blocking the action, you can bring your textfield to front using,
[your_view bringSubviewToFront: your_textfield];
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