We have automation processes that have been scraping a website for months. Recently we discovered that our scraper isn't working.
Turns out, the website has been changed so that they have a table with 9 columns placed inside a frame. However, either the frame or table is styled improperly and only the first 6 columns are on the screen at 100% zoom because the table is too big. When you zoom out to about 50%, the rest of the columns manage to fit in the view.
Unfortunately, there is a button on the very last column that I need to click, but Selenium doesn't like it and says the element is not in view at 100% zoom.
When I use the following to check whether it's in view or not
while (!elmt.isDisplayed()) {
// wait for it
}
and manually zoom the page out so that the column with the button comes into view, it then successfully clicks the button.
How can I zoom the page out?
Yes I had the similar issue while testing in Safari.
The work around is to zoom out the page programmatically before you perform any operation on that page.
With help of js you can do this:
document.body.style.zoom = "30%"
Or whatever value is required. In selenium make use of javascript engine to execute this script.
This worked work around perfectly worked for me.
Related
As anyone can notice it, in the schedule external drag drop demo , someone can drag the event from the TreeView list and when it get near to the right page edge then the page scrolls to the right.
Here is a screenshot showing it.
It's occuring also in our app and it's rather annoying.
We wish there will be a fix for this issue.
Greetings from Syncfusion Support.
We have checked your reported problem that dragging a TreeView node that produces the scroller in the output web page. Currently, we don’t have any property to prevent the scroll when dragging a TreeView node. However, we have already considered this as a feature from our end. It will be included in our Volume 2 Release which is expected to be released in June 2020.
Track the below link to know the feature status.
https://www.syncfusion.com/feedback/13575/need-to-provide-the-option-to-set-the-drag-area-in-treeview-component
But, you can resolve your issue by setting the target for dragArea of TreeView’s drag object in the created event. When setting the target, you can drag the element only inside the target element. It prevents the element from scrolling exceeding that element.
Please, check out the sample with the above explained solution.
Sample: https://stackblitz.com/edit/react-jqzozo-gqpyve?file=index.js
onCreate(){
this.treeObj.dragObj.dragArea = "body";
}
With react-sortable-hoc I am unable to set the DragImage.
I have elements that take up a large amount of DOM space and it is hard to manage from a user experience perspective.
In my example, when the user starts to drag the items are collapsed, however the drag image is still full size, causing confusion.
I created a CodeSandbox link to demo my problem, however my actual production application takes up much more space.
UPDATE
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
I am using AngularJS for a mobile web application and would like to get some "mobile-like" animations to make it look really sharp. My ideal goal would be animations similar to the iPhone's Gmail application, which incorporates lots of animations, like pages sliding from left/right/bottom. And the menu bar fades in/out simultaneously.
I think applying multiple animations at once would require more than one ng-view, which isn't supported at the moment, so I'll hold off on that.
Right now, I just want to be able to make a simple slide-left and slide-right animation similar to how many mobile apps work when you go back and forth between pages. I'd want to have a Back button in my application and somehow be able to specify that this animation should be right-to-left. And a Forward button that I can say has an animation of left-to-right, etc.
This page has exactly what I want (the second demo where the pages slide both left AND right):
http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/
However, this demo is using the deprecated ng-animate command. I haven't been able to convert it.
I attempted to make this using the new AngularJS way of animating. I THINK the issue I'm running into is that when I change routes, I have two ng-view's at the same time and the "old" one still has the animation applied to it, so it looks weird.
Here is my attempt: http://plnkr.co/edit/Xa6Mvbfmux4BAISj9tJb?p=preview
Try pressing Run/Stop each time. I like how when you first run it and press B, both pages slide out together. But then the 2nd time when you press A, one page maintains the slide-right animation while the other does the slide-left, which I don't like. I also tried just removing the ng-leave CSS classes, but that adds some weird issues as well.
How can I update this code to make standard left-to-right and right-to-left sliding animations work?
Bonus: How can I structure the code to easily specify how I want each route/view change to animate? (Example: A-to-B = Left/Right, B-to-A = Right/Left)
I am trying to build an app using Extjs 4.1. In general: it is a viewport with a tree panel on the west and a center panel that it is actually a tab-holder panel. When a user clicks on a tree node a tab is populating the center view. I had set an attribute in the tree panel that after selecting a node it gets deselected (deselectAll). The reason for this is that the user can open many tabs from different places (e.g. within each tab). But, when I set the above attribute it is producing an error (the “data” is undefined). The data that is undefined is the data related to the tree node. So, the question concerning selection model:
How can I address this problem (a solution may be to select the fist node, but I don’t want it)?
As for the history utility, I need to implement browser back button. Especially I want to disable browser’s refresh button. If user opens let’s say 15 tabs and accidentally click on browser refresh or “F5” he/she will lose everything. I had tried many things but with no luck. I am unable to understand “Ext history util”. So,
Is there any good example out there?
Could anybody guide me on how to do it?
Notice that the application is built respecting the new “MVC” architecture.
Stopping the refresh event is pretty easy - providing that your page has the focus. E.g.:
Ext.getDoc().on('keypress', function(event) {
if (event.getCharCode() == event.F5) {
event.stopEvent();
console.log('you stopped the refresh event');
}
});
If your page doesn't have the focus then there is nothing that can be done -- but most of the time your page loses the focus when a different browser tab is opened so F5 would be refreshing that one instead anyway.
I'm still trying to wrap my wits around the first part of your question, but I thought I would share that.
EDIT
Instead of trying to stop the default browser behavior (something which you can only do on a very limited basis), you should look into state management. ExtJS supports it on many components. Here is the ExtJS example.
Also here is the example of controlling browser history.
I am creating a DotNetNuke module which is a simple text field which the value is then passed to stored procedure and results bound to grid.
When I first load the page, I can enter a term - hit 'search' button and I can see in debug that the buttons click is processed - and results are returned.
However the next time I press the button there is no postback? Even my breakpoint on Page_Load doesn't hit?
What gives?
DNN is working to improve this. There are some hopeful plans underway to change the way dynamic modules are cache. For the time being, you do not want to cache modules that have dynamic content.
Yikes! I set the DefaultCacheTime to 0 and now it's working fine!