I'm having a problem clicking on a button that is on a modal or on a page after a modal is supposed to have been closed. Here is my experience:
I have a modal i'm dealing with. I create the actions to have it displayed. I have a wait function that waits for one of the modal's items to be "clickable" (This allows it to be both present and displayed). I then verify the text on the modal.
All of the above is successful. However, when I try to click on the button to close it, I'm getting an error stating that another element on the page would be clickable. I'm thinking I need to disable angular (and CSS?) animation. Is this answer still relevant to the latest version of protractor?
How to disable animations in protractor for angular js application
The problem I have with the above answer is that typescript didn't recognize the "angular" object.
I also see this question: Click on a button in a Modal Window - Protractor But the "answer" is to sleep for 2 seconds. Not my desired solution (if at all possible).
In any case, I found a way to reproduce what I'm talking about. The following spec will load the angular materials page to the dialog demo page. It will click on the Confirm Dialog button, verify the header text on the modal, click the close button, then try to repeat the steps a second time. It fails on the second time, even though it is supposed to have waited until the button is clickable.
/**
* modal.conf.js
*/
exports.config = {
framework: 'jasmine',
specs: ['modal.spec.js'],
useAllAngular2AppRoots: false,
jasmineNodeOpts: {
'stopSpecOnExpectationFailure': true,
showColors: true
}
};
'use strict';
/**
* modal.spec.js
*/
var headerText = "Would you like to delete your debt?";
describe('Click Modal and Close test', function () {
beforeAll(function () {
browser.get('https://material.angularjs.org/latest/demo/dialog')
});
it('should click to open modal', function () {
confirmBtn.click().then(function () {
WaitForLoad(cancelBtn).then(function () {
expect(headerTextEl).toEqual(headerTextEl);
});
});
});
it('should click to close modal', function () {
cancelBtn.click().then(function () {
WaitForLoad(confirmBtn);
});
});
it('should click to open modal', function () {
confirmBtn.click().then(function () {
WaitForLoad(cancelBtn).then(function () {
expect(headerTextEl).toEqual(headerTextEl);
});
});
});
it('should click to close modal', function () {
cancelBtn.click().then(function () {
WaitForLoad(confirmBtn);
});
});
});
// region Page Objects
var confirmBtn = $('.layout-margin > button:nth-child(2)');
var headerTextEl = $('.md-title');
var cancelBtn = $('button.md-cancel-button');
// endregion
// region actions
var WaitForLoad = function (el, timeout) {
var EC = protractor.ExpectedConditions;
return browser.wait(EC.elementToBeClickable(el), timeout);
};
// endregion
Related
I have a bootbox confirm dialog box. In that, I have some form validation.Validation working fine and as long as validation fails confirm dialog box still opens. But when I click on the cancel button, still it is asking for validation.
bootbox.confirm({
closeButton: true,
message: valid_result,
size: 'large',
title: 'Fill fields with related values',
buttons : {
confirm : { label: '<i class="fa fa-check"></i> Validate'}
},
callback: function () {
var res = getLinkupInformation(ids_string)
if(res == true) {
return true;
} else {
return false;
}
}
});
The validation part is working and if validation passed then only modal was closing. But when user click on the cancel button or close icon still it is asking validation. When I remove return false in call back function in else part then the validation button is not working and when I click on the validate button confirmation dialog box was closing.
Please guide me how to solve this issue?
The callback expects you to supply an argument, like so:
callback: function (result) {
}
If the user cancelled the dialog, either by clicking Cancel or the close (x) button, then result (or whatever you called your argument) will be the value false. You would use that value like this:
callback: function (result) {
if(result) {
/* your code here */
}
}
This is more or less covered in the documentation.
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
Testing an angular app, the test are sometimes passing and sometimes failing...
My test cases look like:
it('test-1: should has main button', function () {
expect(page.demoButton).not.toBeUndefined();
});
it('test-2: should open modal on click secondary button', function () {
page.demoButton.click().then(function () {
page.SecondaryButton.click().then(function() {
expect(page.Modal).not.toBeUndefined();
});
});
});
it('test-3: should open modal with correct text', function () {
page.demoButton.click().then(function () {
page.SecondaryButton.click().then(function() {
expect(page.Modal.text.getText()).toEqual('Are you sure to cancel
this?');
});
});
});
If I run the test, sometimes the tests are passed sometimes some of them get failed..
Most of the time error is like: No element found using locator: By.cssSelector(".myButton"). or Cannot read property 'getText' of undefined
Thank you in advance!
I fixed that issue with using:
browser.waitForAngular();
As I see that issue occurs with getText and click events, So:
it('test-2: should open modal on click secondary button', function () {
page.demoButton.click().then(function () {
browser.waitForAngular();
page.SecondaryButton.click().then(function() {
browser.waitForAngular();
expect(page.Modal.text.getText()).toEqual('Are you sure to cancel
this?');
});
});
});
was the solution.
I am new to Meteor JS and I was following the official tutorial on their website.
I thought it would be nice to add an edit button to the original finished and delete buttons.
I can't seem to figure out how to add the functionality of editing the todo item. I have added the edit button itself via html but I just need to figure out how to add the functionality of actually editing the item itself.
Here is the javascript code:
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
// Show newest tasks first
return Tasks.find({}, {sort: {createdAt: -1}});
}
});
Template.body.events({
"submit .new-task": function (event) {
// This function is called when the new task form is submitted
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
}
});
Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current value
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function () {
Tasks.remove(this._id);
},
"click .edit": function () {
Tasks.update(this._id, {});
}
});
}
Help Would Be Much Appreciated!
Im fairly new to SAPUI5 and when I click on button I get the error in the title
what I did in Is I used the SAP web IDE to create new MVC project .
in the main view JS I put
createContent : function(oController) {
var btn = new sap.m.Button({
id:"myBtn",
text : "Content Button"
});
return new sap.m.Page({
title: "TitleT",
content: [ btn ]
});
}
in the Main controller JS I put the following code
onInit: function() {
var that = this;
window.setTimeout(function() {
that.byId("myBtn").setVisible(true);
}, Math.random() * 10000);
},
onPress: function() {
this.byId("pressMeButton").setText("I got pressed");
}
When I run it I see the button but when I click on it I get the error in the on Init,
what am I doing wrong here?
The actual problem with your code is that you create a static id in your javascript view, but the controller will search the id with a prefix like "__jsview0--myBtn" if you call that.byId("myBtn").
Therefore you either have to use createId("myBtn") in your javascript view for defining the id or sap.ui.getCore().byId("myBtn") in the controller and it will work fine. The first approach is recommended though to avoid name clashes.
PS:
i did not really get the use case, it seems like you want to display the button only after a certain (random) timeframe. But the visible flag by default is already true, so the button will always be visible.
Use the standard timeout and byId function from SAPUI5 like this:
onInit: function() {
setTimeout(function() {
sap.ui.getCore().byId("myBtn").setVisible(true);
}, Math.random() * 10000);
},