mouseover element not working using protractor - javascript

I have a directive that produces the following html structure:
<div class="popover ng-isolate-scope" ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)" popover="" label="hover time!" trigger-class="button" content-class="specialContentClass">
<span id="thing" class="popover-trigger button">hover time!</span>
<div ng-transclude="" ng-show="show" class="popover-content ng-hide">
<div class="ng-scope">Popover content </div>
</div>
</div>
The code works fine and the popover content is correctly shown when you mouseover manually using a browser.
I'm trying to test the mouseover functionality with the following protractor test:
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.actions()
.mouseMove(element(by.css('.popover')).find()).perform();
expect(element(by.css('.popover-content'))
.isDisplayed().toBeTruthy());
});
The test seems to run, the browser opens but I don't see the popup-content displaying before the browser then closes so I'm fairly sure the mousemove bit isn't working for some reason. The following is then output in the terminal:
launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
ycompu:angular ycompu$
I've read the documentation and using browser is definitely the right way to approach this test. I'm at a loss as the syntax looks correct to me.

One possible problem is that you need to make it wait for angular to load:
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.waitForAngular();
browser.actions().mouseMove(element(by.css('.popover'))).perform();
expect(element(by.css('.popover-content')).isDisplayed()).toBeTruthy();
});
I've also removed the find() call (not sure if you really need it here) and fixed the parenthesis closing order in the last line.

I sort of discovered a workaround to the mouse hover issue on chrome by accident. If we chain the mouseMove() method twice , it works.
Code that doesn't work on chrome:
browser.actions.mouseMove(element).click().perform();
Code with workaround(which works):
browser.actions.mouseMove(element).mouseMove(element).click().perform();

For none angular sites , please try the below code.The code has been tested and passed
in protractor --version 5.4.2 with Chrome 79 the latest as per today .
describe('My first test class', function() {
it('My function', function() {
browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false
browser.waitForAngularEnabled(false);
browser.driver.get('http://demoqa.com/menu/');
//var menuElectronics= element(by.id('ui-id-4'));//We can define an element and move to it
//browser.actions().mouseMove(menuElectronics).perform();
//Directly find the element using id
browser.actions().mouseMove(element(by.id('ui-id-4'))).perform();
//Click on the element that appeared after hover over the electronics
element(by.id('ui-id-7')).click();
});
})

Use browser.waitForAngular() before calling browser.actions().mouseMove("mouseoverelement").perform();... because you need to wait till angular load.
it('mouseover test', function() {
....
....
browser.waitForAngular();
browser.actions().mouseMove(element(by.css('#mouseoverelement'))).perform();
expect(element(by.css('#mouseoverelement')).isDisplayed()).toBeTruthy();
});

use this method pass the locater to the method this is working fine
mouseHover: function (locator) {
return browser.actions().mouseMove(locator).perform();
},

Related

cy.click() failed because it requires a DOM element. The subject received was: > undefined

I have made a custom command for logout which I am calling in my afterEach hook but every time I am getting this error. Below is the code attached:
Cypress.Commands.add('logout', () => {
//cy.get('#react-burger-menu-btn').should('be.visible').click({force:true})
cy.xpath("//div[#class = 'bm-burger-button']").click({ force: true })
cy.get('#react-burger-menu-btn')
cy.get('#logout_sidebar_link').click()})
I am using the Swag Labs dummy website. Attaching the website's link as well for reference:
https://www.saucedemo.com/
Took help from the documentation but unable to solve the issue.
You can try waiting for visibility of all the elements involved.
cy.get('#react-burger-menu-btn').should('be.visible')
cy.get('#logout_sidebar_link').should('be.visible')
.click()
If it does not work, look at the HTML of the menu and try checking other elements for visibility as well.
You should open the devtools and observe which elements are modified after the click (they will flash in the devtools Elements tab).
Cypress.Commands.add('logout', () => {
cy.get('button[id="react-burger-menu-btn"]').click()
cy.get('#logout_sidebar_link').click()
});
Try this

This selector has more than 1 element Error

I keep getting the error TurnJsError: This selector has more than 1 element i have made a few checks in Firebug and i know that my Jquery is being loaded as are all my libraries/scripts i need.
The error appears after my page has loaded, if i add the following part of my javascript to the console and run it before the page has fully loaded then its ok but still returns the same error as above, however if i let the page load (get the error from above again) and then run that script in console i get another error TypeError: Argument 1 of Node.insertBefore does not implement interface Node.:
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:922,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
$(document).ready(function() {
yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
});
Could i be missing something thats the cause for throwing these errors?
when i add .first() so its like $('.flipbook').first().turn({ after the page has fully loaded i get slight movement in my image, but still getting the error TypeError: Argument 1 of Node.insertBefore does not implement interface Node. When i click on my image it dissapears but the next image is not displayed instead i get another error TypeError: c is null
turn.js work with a single element. Use the .each function.
$('.flipbook').each(function(){
$(this).turn(...);
})
Note that turn may need a unique id on the container.

Uncaught TypeError: Object #<error> has no method 'get' in Chrome

I have this link with onClick function:
<a id="content-tmce" class="wp-switch-editor switch-tmce" onclick="return_tinymce_status();">Visual</a>
When clicked, the editor will load tinymce again (from the original CodeMirror environment). This is the return_tinymce_status function:
function return_tinymce_status() {
if (!(window.tinyMCE)) {
window.tinyMCE=tinymce;
}
}
In Firefox, when I click the link, it is working fine without any errors in the JS console. However in Chrome, I get this:
Uncaught TypeError: Object #<error> has no method 'get'
Any special handling to the JS window in Chrome? Or am I missing something simple here? This is where it points the error to:
var switchEditors={switchto:function(b){var c=b.id,a=c.length,e=c.substr(0,a-5),d=c.substr(a-4);this.go(e,d)},go:function(g,f){g=g||"content";f=f||"toggle";var c=this,b=tinyMCE.get(g),a,d,e=tinymce.DOM;a="wp-"+g+"-wrap";d=e.get(g);if("toggle"==f){if(b&&!b.isHidden()){f="html"}else{f="tmce"}}if("tmce"==f||"tinymce"==f){if(b&&!b.isHidden()){return false}if(typeof(QTags)!="undefined"){QTags.closeAllTags(g)}if(tinyMCEPreInit.mceInit[g]&&tinyMCEPreInit.mceInit[g].wpautop){d.value=c.wpautop(d.value)}if(b){b.show()}else{b=new tinymce.Editor(g,tinyMCEPreInit.mceInit[g]);b.render()}e.removeClass(a,"html-active");e.addClass(a,"tmce-active");setUserSetting("editor","tinymce")}else{if("html"==f){if(b&&b.isHidden()){return false}if(b){b.hide()}e.removeClass(a,"tmce-active");e.addClass(a,"html-active");setUserSetting("editor","html")}}return false},_wp_Nop:function(c){var d,b,e=false,a=false;if(c.indexOf("<pre")!=-1||c.indexOf("<script")!=-1){e=true;c=c.replace(/<(pre|script)[^>]*>[\s\S]+?<\/\1>/g,function(f){f=f.replace(/<br ?\/?>(\r\n|\n)?/g,"<wp-temp-lb>");return f.replace(/<\/?p( [^>]*)?>(\r\n|\n)?/g,"<wp-temp-lb>")})}if(c.indexOf("[caption")!=-1){a=true;c=c.replace(/\[caption[\s\S]+?\[\/caption\]/g,function(f){return f.replace(/<br([^>]*)>/g,"<wp-temp-br$1>").replace(/[\r\n\t]+/,"")})}d="blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|div|h[1-6]|p|fieldset";c=c.replace(new RegExp("\\s*</("+d+")>\\s*","g"),"</$1>\n");c=c.replace(new RegExp("\\s*<((?:"+d+")(?: [^>]*)?)>","g"),"\n<$1>");c=c.replace(/(<p [^>]+>.*?)<\/p>/g,"$1</p#>");c=c.replace(/<div( [^>]*)?>\s*<p>/gi,"<div$1>\n\n");c=c.replace(/\s*<p>/gi,"");c=c.replace(/\s*<\/p>\s*/gi,"\n\n");c=c.replace(/\n[\s\u00a0]+\n/g,"\n\n");c=c.replace(/\s*<br ?\/?>\s*/gi,"\n");c=c.replace(/\s*<div/g,"\n<div");c=c.replace(/<\/div>\s*/g,"</div>\n");c=c.replace(/\s*\[caption([^\[]+)\[\/caption\]\s*/gi,"\n\n[caption$1[/caption]\n\n");c=c.replace(/caption\]\n\n+\[caption/g,"caption]\n\n[caption");b="blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|h[1-6]|pre|fieldset";c=c.replace(new RegExp("\\s*<((?:"+b+")(?: [^>]*)?)\\s*>","g"),"\n<$1>");c=c.replace(new RegExp("\\s*</("+b+")>\\s*","g"),"</$1>\n");c=c.replace(/<li([^>]*)>/g,"\t<li$1>");if(c.indexOf("<hr")!=-1){c=c.replace(/\s*<hr( [^>]*)?>\s*/g,"\n\n<hr$1>\n\n")}if(c.indexOf("<object")!=-1){c=c.replace(/<object[\s\S]+?<\/object>/g,function(f){return f.replace(/[\r\n]+/g,"")})}c=c.replace(/<\/p#>/g,"</p>\n");c=c.replace(/\s*(<p [^>]+>[\s\S]*?<\/p>)/g,"\n$1");c=c.replace(/^\s+/,"");c=c.replace(/[\s\u00a0]+$/,"");if(e){c=c.replace(/<wp-temp-lb>/g,"\n")}if(a){c=c.replace(/<wp-temp-br([^>]*)>/g,"<br$1>")}return c},_wp_Autop:function(a){var c=false,b=false,d="table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|option|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|noscript|samp|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary";if(a.indexOf("<object")!=-1){a=a.replace(/<object[\s\S]+?<\/object>/g,function(e){return e.replace(/[\r\n]+/g,"")})}a=a.replace(/<[^<>]+>/g,function(e){return e.replace(/[\r\n]+/g," ")});if(a.indexOf("<pre")!=-1||a.indexOf("<script")!=-1){c=true;a=a.replace(/<(pre|script)[^>]*>[\s\S]+?<\/\1>/g,function(e){return e.replace(/(\r\n|\n)/g,"<wp-temp-lb>")})}if(a.indexOf("[caption")!=-1){b=true;a=a.replace(/\[caption[\s\S]+?\[\/caption\]/g,function(e){e=e.replace(/<br([^>]*)>/g,"<wp-temp-br$1>");e=e.replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g,function(f){return f.replace(/[\r\n\t]+/," ")});return e.replace(/\s*\n\s*/g,"<wp-temp-br />")})}a=a+"\n\n";a=a.replace(/<br \/>\s*<br \/>/gi,"\n\n");a=a.replace(new RegExp("(<(?:"+d+")(?: [^>]*)?>)","gi"),"\n$1");a=a.replace(new RegExp("(</(?:"+d+")>)","gi"),"$1\n\n");a=a.replace(/<hr( [^>]*)?>/gi,"<hr$1>\n\n");a=a.replace(/\r\n|\r/g,"\n");a=a.replace(/\n\s*\n+/g,"\n\n");a=a.replace(/([\s\S]+?)\n\n/g,"<p>$1</p>\n");a=a.replace(/<p>\s*?<\/p>/gi,"");a=a.replace(new RegExp("<p>\\s*(</?(?:"+d+")(?: [^>]*)?>)\\s*</p>","gi"),"$1");a=a.replace(/<p>(<li.+?)<\/p>/gi,"$1");a=a.replace(/<p>\s*<blockquote([^>]*)>/gi,"<blockquote$1><p>");a=a.replace(/<\/blockquote>\s*<\/p>/gi,"</p></blockquote>");a=a.replace(new RegExp("<p>\\s*(</?(?:"+d+")(?: [^>]*)?>)","gi"),"$1");a=a.replace(new RegExp("(</?(?:"+d+")(?: [^>]*)?>)\\s*</p>","gi"),"$1");a=a.replace(/\s*\n/gi,"<br />\n");a=a.replace(new RegExp("(</?(?:"+d+")[^>]*>)\\s*<br />","gi"),"$1");a=a.replace(/<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi,"$1");a=a.replace(/(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi,"[caption$1[/caption]");a=a.replace(/(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g,function(f,e,g){if(g.match(/<p( [^>]*)?>/)){return f}return e+"<p>"+g+"</p>"});if(c){a=a.replace(/<wp-temp-lb>/g,"\n")}if(b){a=a.replace(/<wp-temp-br([^>]*)>/g,"<br$1>")}return a},pre_wpautop:function(b){var a=this,d={o:a,data:b,unfiltered:b},c=typeof(jQuery)!="undefined";if(c){jQuery("body").trigger("beforePreWpautop",[d])}d.data=a._wp_Nop(d.data);if(c){jQuery("body").trigger("afterPreWpautop",[d])}return d.data},wpautop:function(b){var a=this,d={o:a,data:b,unfiltered:b},c=typeof(jQuery)!="undefined";if(c){jQuery("body").trigger("beforeWpautop",[d])}d.data=a._wp_Autop(d.data);if(c){jQuery("body").trigger("afterWpautop",[d])}return d.data}};
Thanks for your help.
UPDATE: By the way after executing the function "return_tinymce_status()" it goes to this line of code:
$('.switch-tmce').click(function() {
//Visual editor is activated
//Turn off Code Mirror
editor.toggleCodeMirror('content', false);
switchEditors.switchto(this);
});
Maybe it has something do with "this".
I found the solution to this. Instead of using this:
<a id="content-tmce" class="wp-switch-editor switch-tmce" onclick="return_tinymce_status();">Visual</a>
I remove the onclick function using jQuery so the result is this:
<a id="content-tmce" class="wp-switch-editor switch-tmce" onclick="">Visual</a>
This is by using jQUery:
$('.switch-tmce').attr('onclick', '');
Then run that function (return_tinymce_status) within jQuery click event:
$('.switch-tmce').click(function() {
return_tinymce_status();
});
Error is gone. Problem solved. I hope this helps someone.

Loading data ajax style

I jsut started learning angular.js. Can you guys show me the right way to make a page that initially presents an ajax loader element saying 'Loading data' or something like that. Then after data's been fetched it would update the view and hide the element. I can put stuff in page load event using jquery, but how do you do that using pure angular? So far I figured out how to put that in click event:
<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
<button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
angular.module('VideoStatus', ['ngResource']).run(function(){
// I guess somehow I can start fetching data from the server here,
// but I don't know how to call Controller methods passing the right scope
});
function VideoStatusCtrl($scope, $resource) {
$scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });
$scope.getVideos = function () {
$scope.videoResult = $scope.videoStatus.get();
console.log('videos fetched');
};
};
</script>
Kudos to Adam Webber & Peter Bacon Darwin
Here is the working plunker
Here is my version plunker that make loading as a directive with modal popup feature
Here is the tutorial to use my version
you only need loading.js and modal.js and reference jQuery and twitterbootstrap css.
in your code,
Only 2 steps you need to do with your code.
Add the following code to HTML
< div data-loading> < /div>
Add LoadingModule module to your application module.
angular.module('YourApp', ['LoadingModule'])

Object doesn't support this property or method error in IE7 jQuery

IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!
What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js
I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.

Categories

Resources