Can page object design pattern be implemented in angular e2e or does it follow some other design pattern ?
As far as I'm concerned there is this GitHub project called Astrolabe (by stuplum) which is an extension for protractor that adds page objects to your functional/e2e tests.
https://github.com/stuplum/astrolabe
However, at the time of writing this it has some bugs to fix and it seems to be a WIP project.
You can find here a question regarding Page Object pattern alternatives:
Page Object pattern and alternatives
The protractor getting started page now has a section about it.
Note protractor is now the AngularJS team preferred way for e2e testing.
Regarding Astrolabe i don't believe that's the way to go, see for example this leaking abstraction while using sendKeys on their readme
signInPage.username.sendKeys('a username'); // will fill the username input with the text 'a username'
While the proper way would be more like
signInPage.setUserName('a username');
I prefer to create my own page objects without the need of any extension like Andres shows here
Related
I am trying to write tests for one of our rich text components which was implemented with slate js editor in react js. So when writing tests, I am retrieveing the element div[contenteditable='true'], but not able to simulate events like change, blur, focus. The handlers attached to editor component are not getting called. I tried multiple combinations, but no luck. Can someone please help on this? Is it possible to simulate events for contenteditable element using testing library (contenteditable is implemented using slatejs)?
Like you've discovered, contenteditable isn't supported by JSDOM. React Testing Library (RTL) is built on top of JSDOM, so it's not possible to test the Slate editor properly with RTL until JSDOM implements support for contenteditable.
Use a browser automation library together with Testing Library
Your options are then to use a tool that creates a real browser context. Testing Library have integrations with many tools that do exactly that: TestCafe, Cypress, Nightwatch, Puppeteer.
You can also use the above tools on their own, without Testing Library.
I've solved this using Puppeteer, and there are two approaches:
Run a local server and tell Puppeteer to go to something like localhost:3000
Set the content directly with page.setContent(htmlString)
(1) is the most common, and you'll find many guides for this since it's a common approach for end-to-end testing (google search).
(2) is a little trickier because you will have to transform and bundle your source for each test, and then inject it as HTML into the browser page. I prefer this approach because the testing experience is much more similar to using RTL. I've created a repository with an example of this setup with the Slate editor here: https://github.com/marcusstenbeck/puppeteer-react-testing-template/
Can anyone suggests me angularjs framework with fabricjs.
I'm going to build angularjs application , having canvas (FabricJS).
Thanks in advance .
I would not recommend you to use angularjs with fabricjs.
The project I'm currently working on uses this combination.
We get a lot of troubles related to scope. E.g. if you need to update something in angular from fabricjs, you need to determine if angular digest loop is currently running and if not, run it.
You could try React + fabricjs instead. React looks more flexible and much faster works with DOM.
In my Angular project (seat reservation system) I use Fabric.js (for seat plan editor) without any complications. I have no problem with displaying more than 1000 objects.
Here you can find my "Hello World" Angular + Fabric.js project.
Here you can find my answer on question "How to use / include fabricjs in Angular2".
You should not worried about how bind them togheter. Keep it simpe.
Fabric will trigger a series of event from user actions, a bunch of event similar firing function that you can find in your doc. Use those to update your app state.
For all the rest keep a reference of the canvas in you scope and use it normally.
Need guidance from you all on the below situation.
I am working on a IT concern where my client asked to me to do a POC to test web app(which has been build using angularJs).
Expectation from my client:
He wants the web app to be tested in a controlled way using BDD(Behavioral Driven Development)
His recommendation is to automate the testing of webpage(angularJS) using Cucumber with BDD approach
My Analysis Outcome:
we can automate a webpage (non angularJS web app) using Cucumber with BDD in a efficient way by providing element identification using common properties but when i think about the angular properties, there is no option to use the angularJS element in cucumber as per my knowledge.
Help required on:
Could any one please suggest me what is the efficient way that we can automate a angularJS page using Cucumber and how can we get the angularJs page element properties in cucumber?
check http://www.protractortest.org/#/frameworks
It has the basic setup for the protractor framework with protractor-cucumber-framework.
exports.config = {
// set to "custom" instead of cucumber.
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework')
// relevant cucumber command line options
cucumberOpts: {
format: "summary"
}
};
On the cucumberjs github page you have an overview of the options:
https://github.com/cucumber/cucumber-js. You can use these in the cucumberOpts part in the protractor.conf file.
Expl:
cucumberOpts: {
require: "test/features/mystep_definitions/**/*.js",
format: "pretty"
}
I am working on a very similar situation at my client. Only difference is, we are using .NET (and thus SpecFlow)
Now I can speak for .NET that protractor is the way to go for the Angular JS application. It works like a charm and I am able to locate all elements as I go.
If you are hesitant to use protractor, it is still possible to locate every element by using javascript executor or css locator. Both work perfectly for an Angular JS application. Just make sure you wait the right amount of time for your elements to get loaded, or else you will get a lot of NoSuchElement exceptions.
Good luck!
I'm running an Angular app and I'm trying to get the current URL when testing on protractor. Which one to use?
browser.driver.getCurrentUrl() or browser.getCurrentUrl() ?
If this is an Angular application under test - use browser, otherwise - browser.driver.
To quote #jmr from a relevant github issue:
If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver.
Though, note that both are gonna work if this is Angular application under test. Some people even said that found browser.driver more reliable if it the sync time is longer than usual:
Just to add to this - I find that browser.driver works better on AngularJS apps that take time to sync. I have tried both and for some reason browser.driver is more reliable.
Though, I've personally used browser.getCurrentUrl() and cannot recall any problems.
How can I tell whether a (Drupal 7) web app was built using Angular by looking at the page source, and not having to ask the developers?
The best way to check is to write "angular" on browser console. If you get any object [With child objects as "bind","bootstrap","callbacks","module" etc.] then its an angular web app.
You can install a chrome or firefox extension called Wappalyzer. It tells you which site you are navigated on in your browser and the stack they use.
Find it here: https://www.wappalyzer.com
You could try: angular.version.full first. If this doesn't work, try getAllAngularRootElements()[0].attributes["ng-version"]. The reason being in Angular 1 the former will work and from angular 2 onwards the later will work.
If it's an online site you can use http://builtwith.com/ and it usually can give you a good and useful bunch of information about that site.
However if they are using angular you can take a look at their page sources to see if they are using any attributes of angular like ng-repeat for example
You can also take a look at the sources that your browser get while browsing that site to see if javascript files for angularjs are included among the sources.
Application declared using ng-app directive
very simple controller and directive
check for ng-model, ng-repeater attributes in the code. All these attibutes are written in small letters.
Also you can check by typing in the console(ctrl + shift + i) and navigate to console tab. There type in window.angular.version --> it displays the version of the site your are currently inspecting.
Try
https://builtwith.com/
This is the website that currently gives you the most detailed information about what technologies a site uses. They will let you do 5 free lookups a day.
https://wappalyzer.com/
is a good one too, and serve as a complement to builtwith. I don't think there is a limit of lookups, but the results are less detailed.
Those two used together may give you more insight.
use window.getAllAngularRootElements() in the browser console if it return some value its an angular application
For Angular, in Chrome's inspector, in the Elements tab, inside the body element is an element called app-root containing ng-version, which shows the Angular version it's using.
There is a Google Chrome extension called 'ng-detector'. It may be obtained from the Google webstore:
https://chrome.google.com/webstore/detail/ng-detector/fedicaemhcfcmelihceehhaodggfeffm
It creates a small icon next to the URL bar that indicates whether or not it thinks the page was created using Angular, although I have not thoroughly tested its validity.
Install chrome extension React-Detector, it works!
window.getAllAngularRootElements() worked for me
You can install a Chrome or Firefox extension called Augury. It tells you if app is an angular or not.