I am writing a code using playwright test and its working fine in debug mode but normally its not able to find the element because not able to scroll down the page., I have tried using scrollintoview and mouse.move funtion as well.
You can use locator.focus() instead which will do the scrolling for you.
await locator.focus();
If you want to perform the click operation on that element, then page.click() function internally scroll into view to the target element.
Reference:
https://playwright.dev/docs/api/class-page#page-click
page.click(selector[, options])
This method clicks an element matching selector by performing the following steps:
Find an element matching selector. If there is none, wait until a matching element is attached to the DOM.
Wait for actionability checks on the matched element, unless force option is set. If the element is detached during the checks, the whole action is retried.
Scroll the element into view if needed.
Use page.mouse to click in the center of the element, or the specified position.
Wait for initiated navigations to either succeed or fail, unless noWaitAfter option is set.
Related
There's a web page where I'm trying to use Tampermonkey to give focus to an element in an iframe which is cross-origin to the top document. Copious use of console.log() tells me that my script is executing, getting the proper element, and calling focus() or click() on it, but the component isn't scrolling when I press space; I have to manually click on the element for it to scroll from keyboard input (the page is otherwise responding to keyboard input just fine). I used "inspect" on the element I want and then entered $0 into the console to make sure that I referring to the correct element in my script. I even have my Tampermonkey script use the setTimeout() trick, with a timeout of 1 second, but that's of no help.
A few other things of note:
While the page is loading I can scroll up and down using the arrow keys, but as soon as it finishes loading it won't respond to those keys again until I click the element with my mouse.
If I click on the element, press Tab to give focus to the next element, then press Shift-Tab to cycle backwards,
the result is that there's that thin blue outline around my desired element, seeming to indicate that it has focus, yet pressing space or the arrow keys won't scroll it.
I'm using Chrome 68.0.3440.106
EDIT: The pages in question are rented books from VitalSource viewed with their in-browser book viewer. Unless you already have a book with them that's currently valid you won't be able to view the problem pages.
Visible in the context of UI-testautomation can mean two different things:
Visible anywhere on the website. You can see it immediately or after you scroll
Visible in the viewport, which means, that you can see the element without scrolling.
In the Ranorex documentation the definition isn't clear regarding this. So what is in Ranorex the exact definition for "visible"?
The visible attribute itself just means that it is possible in general to bring the element to the visible region. If the visible attribute of a parent element is set to false it might also not be possible to make the element itself visible.
It means that visible anywhere on website.
It means if you get visible true but cannot click you need to scroll first.
I have to add istantly some items without reload the page. After adding these elements I call
$('#one').trigger('create');
But not everything changes as it should (screenshot: http://www.ianaz.com/9a7c50414.html )
The background stays grey, the icon at the right is not added and the text becomes link.
It does not transform everything in a list "button". The third component in the screenshot is as should be.
Do I have to call another method?
Thanks
Just before you call create,try to call listview("refresh") on the list.For eg. if list is the id of the listview,following code should be used:
$("#list").listview("refresh");
I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
No luck with return false. Please see the demo.
I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.
Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.
The pseudocode would look something like this:
call .accordion('destory') on the current accordion
create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
insert the new element to the existing accordion
bind a click event to the remove button in the new element to stop event propagation
initiate the accordion, i.e. .accordion({..})
SO posts on event capturing in jQuery:
event capturing with jQuery
Event Capturing vs Event Bubbling
Just use the given functions by the plugin:
$('#accordion').accordion({active:8, disabled:true});
jQuery('.remove').click(function(){
$('#accordion').accordion('disable');
})
I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion
Hope this is what you were looking for :-)
I have a script that uses jQuery UI's graggable and droppable functionality.
Items are dragged from left panel into main area and dropped.
There are two scenarios:
Items are dropped into other boxes, preset on page load or can be dropped into main area to create a new box. The items can be moved between the boxes. Everything works fine with this setup.
In second scenario there are no preset boxes in main area. They are supposed to be created whn an item is dragged and dropped from the left panel. However, for some reason it only allows me to create one box. Here's an example.
My level of UI proficiency is not high enough to spot what the problem is.
Your problem is that in this code:
$.when(createEmptyStack()).then(function(data) { ... }
data is always "" meaning that you're attempting to add a new element to the page with the same id over and over again (your AJAX request to createEmptyStack is not returning anything in the response). This is why it works fine the first time; the id doesn't exist and so the code works as expected.
When you drag another item into the main area, the element may be successfully appended, but it has a duplicate id. This code:
putCardIntoStack(ui.draggable,newstackId);
(in the same block as the code above)
Is always called with the draggable object and just STACK as the newstackId.
In short, this is a problem with your server-side code not returning a stack id. According to Firebug, your AJAX request isn't returning anything at all.