How do I turn off animation in the protractor?
I found several answers on Google, but they don't seem to apply to my project.
Some of the answers mentioned adding some code to their conf.js
file onPrepare()
, but I don't have that file in my project. I have a file named protractor.config.js
which was by default in angular quickstart project. Anyway, this config file has a function as well onPrepare()
, so I tried to add the code from answer # 2 in this question: How to disable animation in transporter for angular js app , but then my tests didn't work:
message: Failed: Trying to load mock modules on an Angular2 app is not yet supported.
source to share
If you want to disable Angular 2 animations check out the answer as @NeilLunn commented. If you want to disable CSS animations, you can override it with jsscript css client injection. Below is an example script.
Place it in the onPrepare
protractor config file
return browser.driver.executeScript(disableCSSAnimation);
function disableCSSAnimation() {
var css = '* {' +
'-webkit-transition-duration: 0s !important;' +
'transition-duration: 0s !important;' +
'-webkit-animation-duration: 0s !important;' +
'animation-duration: 0s !important;' +
'}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
What it will do is add some custom CSS to override some of the animations. This, for example, will prevent colored animation on hover.
Hope it helps
Update:
After loading the url, you need to enter script. If you put it in onPrepare
, and you don't load the url before entering the script, then the script will be injected in data
-url. Using this like this would do the trick
describe('Demo test', () => {
beforeEach(() => {
browser.get('http://www.protractortest.org/#/');
browser.driver.executeScript(disableCSSAnimation);
function disableCSSAnimation() {
var css = '* {' +
'-webkit-transition-duration: 0s !important;' +
'transition-duration: 0s !important;' +
'-webkit-animation-duration: 0s !important;' +
'animation-duration: 0s !important;' +
'}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
}
});
it('Should go to Protractor test page', () => {
expect(browser.getTitle()).toEqual('Protractor - end-to-end testing for AngularJS')
});
});
Important:
Make a way so that it can be reused because every time the page is reloaded / navigated to a different url the script has to be injected.
This should do the trick at the end. Good luck to you.
source to share
I managed to accomplish this using a query parameter.
Based on Neils answer, I was able to update my SharedModule to switch between BrowserAnimationModule
and NoopAnimationModule
.
I created a method that adds a query parameter, which I will look for later. I use this method for all navigation in my tests, so I can be sure the parameter is always present.
E2eCommon
public static navigateTo(path: string) {
browser.get('/' + path + '?qa=true');
browser.waitForAngular();
}
Then in my module, where I declare the animation module, I check the request parameter and based on whether it is present, either load BrowserAnimationModule
orNoopAnimationModule
shared.module.ts
@NgModule({
declarations: [
...
],
exports: [
AnimationModule(),
...
],
imports: [
AnimationModule(),
...
]
})
export class SharedModule { }
export function AnimationModule(): any {
return window.location.search.indexOf('qa=true') > -1 ? NoopAnimationsModule : BrowserAnimationsModule;
}
source to share