Is there a possible way to automate the click event of angularjs button, which navigates to a new page in turn.
Something like following is what the original browser code is.
"data-ng-click="services.urls.openPageUrlWithId(plusPageId)"
I am able to get to the point where the click event comes into picture, but it is not getting navigated to a different screen.
Any solution to this problem ? Thanks.
Is this for end-to-end testing purposes?
If so, the angular team themselves maintain a fantastic tool called protractor https://angular.github.io/protractor/#/
It provides smart abstractions on top of WebDriverJS/Selenium to allow you to easily find elements by their angular bindings and click through as you have described.
Related
I'm curious what things a developer can do to make the creation of automated tests easier for testers using selenium web driver. The only thing I'm thinking of is using unique IDs for fields, buttons, etc. Can anyone think of any thing else that can be done?
From my experience, this really helps to automate whole process:
Provide unique IDs to at least important buttons (submit form, search buttons...)
Do not use HTTP Basic Authentification. Use normal login instead
Get rid of CAPTCHA fields. At least on test environment.
Provide friendly URLs, so that certain areas of app can be reached immediately
When page is loading, show some load image. Best option is to provide some small element which loads only when whole page is loaded.
Get rid of hover-only menus on page (you have to hover certain element to see other)
I am running into a problem, and I cannot seem to find a fix for it. The situation is as follows the marketing department wants to integrate GTM. Which is fine as they want to have full control over the different third party providers they wish to integrate. But for this to happen they would like to have the ability to track all clicks on a page.
And they came back to me that currently no click events are being tracked with the current configuration within GTM. At first the thought was that events were not propagating (bubbling) upwards. But having tested this myself by binding a event listener to the document (click) (see below) all div, buttons etc. with an ng-click directives did reach this handler without problems.
document.addEventListener("click", function(event){
console.dir(event.target);
});
So my assumption was that there was something wrong with the configuration but after looking at the configuration (one I created myself which looks as follows):
I still could not get it to work. Buttons that already use angulartics - https://luisfarzati.github.io/angulartics/ to send an event to the GTM container work as expected:
Download
Only the catch all click events (or any filter on it like purely looking at button clicks) does not. Now after looking at it a little more it seems GTM expects the gtm.click _event to happen. But I can't figure out (gazing through the gtm.js file) how they bind to all click events within the document (there is a click binding on the document after initialization but I am unsure if this is GTM or something from angular). And even if so I have placed many breakpoints within this file which seemingly could be related to it but none of them triggered when something was clicked.
So my question is, has anybody got experience combining angularjs with angulartics and GTM while having it catch all click/touch/mousedown etc. events and send these to GTM?
Make sure that you pusblished GTM container after you made some changes. Use "Publish Now" or "Preview and Debug" buttons inside of GTM interface(top-right corner).
Because according to your tag config this tag should fire every time when user clicks something on the website.
Regarding to "gtm.click" - this GTM-event will fire every time, when user clicks something on the website.
On the screenshot you may see, how it looks like in GTM debug mode("Preview and Debug") when user clicking on somethig at web-page, when GTM click listener turned on(like in your tag).
May be some relevant articles from my website about tracking of buttons/links on GTM will help you too:
http://konygin.net/gtm/tracking-links-en/
http://konygin.net/gtm/tracking-buttons-en/
My problem turned out to be that the person (from marketing) who gave me the html GTM tags (noscript / script) did not copy it properly (or something went wrong when it was pasted within JIRA). And after I copied it directly (having gotten access to the GTM admin panel) it worked as I would expect it to work.
Seeing as I debugged it by trying to only have one index.html with purely a button in it. Even at that point the tracker did not work and I became suspicious why that was happening as there was no angular code any more that could cause the problems.
Lesson learned, next time copy code yourself when you need it to make sure it does not get corrupted along the way :/
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.
I'm using cakephp and I'm trying to implement a modal-window for login and singup, similar to the one in Digg.com "Join Digg! - Login". Does anyone knows about a library/plugin/tutorial/screencast or what ever to achieve a "login modal" in CakePHP?
By the way I already have working all the registration and authentication process, I just need the a modal example, how can I do that?
Thanks!
The popup on Digg is implemented in JavaScript. It looks like they might have their own code for it. One easy alternative that looks very similar is Fancybox. You can set up your login as its own page and show it in an iframe inside Fancybox's popup.
If you look through the Fancybox documentation, you'll find you can hook onto various open/close events which you might use (for example) to reload the main page for the newly authenticated user.
There are other popular "lightbox" JS implementations out there if Fancybox doesn't suit your needs.
You probably don't need a lot of CakePHP magic to make this workâor rather, you've already implemented the magic you DO need.
CakePHP doesn't have any built-in functionality to create modal windows, but jQuery UI does: http://jqueryui.com/demos/dialog/
I'd recommend this because it's a standard solution and pretty simple to set up. This is what I always use on CakePHP sites for creating and dealing with modal windows.
I'm looking for something similar to the VB6 / .Net Winforms "Browser Control", that let's you show a browser inside your application.
I don't want to just render a page, I want it to be a fully-functional browser, in which people can click links, will run Javascript, etc.
In essence, what I want is an IFrame, only that it runs inside a Flash app, or a Silverlight app.
The ultimate reason for this is that I want to defeat IFrame busters. I'm making a web app that lets you see other sites inside of it, and I'm running into a bunch of sites that have this code:
var t=top.location,w=window.location;if(t!=w) t.replace(w);
(that's from eBay BTW)
which essentially pops the user out of my site and into theirs.
My hope is that by using a "browser control" of some sort, inside a plugin sandbox, "top", will be top for that browser control, and not for my site.
Of course, if you have any other ideas to achieve the same, they'll be more than welcome.
Edit: I've tried the Component One control suggested by Bill, but it didn't work for these purposes, because it's creating an IFrame outside of the SilverLight control, so it executes in the same context as the page hosting Silverlight, which is what I'm trying to avoid.
Northcode SWF Studio allows you to add browser window on the stage in Flash. I personally use SWF Studio as a third party SWF2EXE tool to extend the power of Flash projectors. It's quite stable and powerful. As far as browser control is concerned here is the example you can download and test if it serves your purpose. Check the Browser APT here.
We've not built a component to enable folks to do this but we're open to suggestions here. That being said, easiest solution is an iFrame, but word of caution in that when you overlay an iFrame over the the top of Silverlight we've seen customers experience perf issues as a result (mostly due to alpha transparency of the iframe etc).
This isn't isolated to Silverlight, Flash suffers the same issue as it has to do with browsers and rendering within the given operating system.
HTH.
Scott Barnes / Rich Platforms Product Manager / Microsoft.
I use the HTML control created by Component One. It has the limitation that the Silverlight object in the page should be set to windowless, but otherwise it works very well.
It's an old post but I'll add my tupence answer. I used the DivElements free control for Silverlight link text and it works quite nicely. It just positions the div accurately so that it looks like it's on top.
As for the other such controls, you've got to set the windowless property of the Silverlight container to true.
It works really well for me and I'm able to seemlessly have Google maps and the Acrobat plugin displayed side by side with my Silverlight application.
PS: because the component just adds a <div> to the page, you can't do stuff like having it load dynamically Javascript file like in the <header> tag.
PPS: when setting the HTML code "by hand", be sure to hook up on the DocumentReady or Loaded event before playing with the HTML DOM.
Hope that helps someone.