I'm facing the following situation: When an user clicks a submit button, the app disables the button. Then, when the callback function of the ReCaptcha is called, I can enable the button again. But if the user closes the verify window how can I know that and then enable my button again?
I was facing the same problem using invisible recaptcha. The way I solve it is observing when the captcha was getting closed.
First get the div Element containing the captcha.
let iframe = document.querySelector('iframe[src^="https://www.google.com/recaptcha"][src*="bframe"]');
let container = iframe.parentNode.parentNode;
Then
let observer = new MutationObserver( mutations => {
if(container && container.style.visibility === 'hidden'){
// Re enable the button
}
});
observer.observe(container, { attributes : true, attributeFilter : ['style'] });
Related
I'm trying to use testcafe to fill forms on a page.
When the form is filled, I'd like to be able to stop the test with the window still open so a human can review the form before clicking submit.
I can pause the test with t.debug() but this locks the page and shows the testcafe controls overlay at the bottom.
Is there a way I can remove this overlay and unlock the page?
I've tried using client functions to hide the element with javascript as follows:
test('test_1', async (t) => {
const hideOverlay = ClientFunction(function() {
const target = document.querySelector('#root-hammerhead-shadow-ui > div > div');
target.style.display = 'none';
return true;
})
await t.wait(5000);
setTimeout(async function() {
const res = await hideOverlay();
console.log('-------->', { res });
}, 6000);
await t.debug();
});
Since no code will be executed after debug is invoked, I thought I could use a settimeout to queue the call to the function that hides the overlay, so that it is queued and only executes after debug is called and the overlay is visible.
Didn't work though :( code didn't execute, got an unhandled promise rejection.
Could really use some help here, thanks :)
Yes, you can unlock the page by clicking the 'Unlock page' button in the footer as #VysakhMohan mentioned in the comment.
Please refer to the client-side debugging documentation for more details.
I am trying to create a simple confirmation ("Do you want to close this window?") when closing a modal dialog page with the (X)-button.
What would be the most efficient way to implement this in Apex 5.0?
I tried to implement a solution using the dialog closed event, this seemed to have had no effects on closing the dialog with the (X)-button, however.
Try to create a dynamic action, on page load, in your modal page with that code:
Your da should execute a javascript code:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.unbind(); //remove the behavior
//put another behavior to the button
button.on('click', function() {
apex.message.confirm( "Your message here", function( okPressed ) {
if( okPressed ) {
apex.navigation.dialog.cancel(true);
}
});
});
Try to confirm if the "X" button have the css class "ui-dialog-titlebar-close", they can change between versions of apex.
If necessary, update the first line of the code with the correct class.
Have you considered hiding the button (x) and canceling the modal dialog page by clicking on the "cancel" button?
If you want to rename the standard button names in the confirmation window, use:
apex.lang.addMessages({"APEX.DIALOG.OK": pOkLabel});
apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});
I am very very new to automated testing and I am currently completely stuck with the following issue:
I have a webpage open(first window)
In the same test I call a .newWindow(second window) and do some stuff in that window. The last action opens new popup window(popup window).
What I need, is to set the focus on a popup window.
According to WebdriverIO API I can use .switchTab http://webdriver.io/api/window/switchTab.html
But to be able to switch to a popup window I have to indicate handle, but I don't understand how to get the handle of a popup window :(
That s my piece of code:
//this is the part where I have already second window open
it('should open email letter', function(done) {
client
.pause(2000)
.clickAndWait('[title="Password restore"]', 4000)
.clickAndWait('[title="Restore password"]', 7000) //this is the part where popup window opens
.pause(2000)
.windowHandles(function(err,res){
console.log(res, handles)
}) // I have got three handles but i dont know how to use them now
.........
There is a lot of examples in java, but i didnt find anything that would fit mine language.
Please, excuse me my dumbness, I am really a very beginner and I will appreciate if somebody could explain that to me.
Thanks a lot in advance!
we not use getCurrentTabId to remember the handle of the currently open window?
For example:
var main, popup; //your window handles
client
.getCurrentTabId(function (err, handle) {
main = handle;
})
.newWindow('http://localhost:9001/') //you are on popup window
.getCurrentTabId(function (err, handle) {
popup = handle;
})
.switchTab(main) //you are back to main window
.switchTab(popup) //you are on popup again
.close(popup) //extra bonus!
I notice you stated "The last action opens new popup window(popup window). What I need, is to set the focus on a popup window."
I had this issue. But the new window was opened when clicking on login with facebook. This caused an issue on finding the handle for the new window because I could not use .newWindow('http://localhost:9001/'). The API keys and all sorts are added as parameters when using a social login. So one has little control
To handle this I registered each window ID as its opened.
The first background step in my feature is Given I open the url "/a.html"
In the step you can set an empty array as the variable windowID with let let windowID = []
So my step file would look like this
const url = 'http://localhost:8080'
let windowID = []
this.Given(/^I open the url "([^"]*)"$/, (path) => {
browser
.url(url + path)
console.log(`# Navigating to ${url + path}`)
expect(browser.getUrl()).toEqual(url + path)
windowID.main = browser.getTabIds()
});
During the step after clicking the Facebook button you can then check all the open window ID's and drop the one that matches windowID.main
this.When(/^I authenticate with facebook$/, function (arg1) {
// log the ID of the main window
console.log('Main Window ID' + windowID.main)
browser
.pause(2000)
.getTabIds().forEach(function (value) {
if (value === windowID.main) {
// we do not need to do anything with windowID.main as it's already set
return
}
// if the value does not match windowID.main then we know its the new facebook login window
windowID.facebook = value
})
// log both of these
console.log('Main Window ID: ' + windowID.main)
console.log('Facebook Window ID: ' + windowID.facebook)
// Do the login
browser
.switchTab(windowID.facebook)
.setValue('input[name="email"]', process.env.FACEBOOK_EMAIL)
.setValue('input[name="pass"]', process.env.FACEBOOK_PASSWORD)
.submitForm('form')
});
note that I add credentials as an environment variable. This is a good idea, you don't want to commit your personal credentials to the code base. One may think well obviously, but you may not, who knows.
You had your question answered years ago, but I found this post first when trying to find a solution so it seems a sensible place to put this addition.
Here is my situation:
I have a very long multi-page survey built by webforms in drupal.
The questions are not required but we don't want the users to skip all the questions too easy by just clicking Next Page button.
So this is what we need:
When the user try to click on "Next Page" button with any empty fields on the page, error or warning messages will show up, "Are you sure you want to skip this question?", as well as a skip button next to it. When the user click on the skip button, the message disappears and they click on the next page button to proceed the survey.
Here are my thoughts on this:
I used webform validation module to create an Not Empty validation and apply it to the fields.
in webform_validation_validators.inc:
case 'skip_if_empty':
foreach ($items as $key => $val) {
if (count($val) == 0) {
drupal_set_message(t('This field is empty.'), 'warning');
// do something, not sure about it here
}
}
Another thought:
I used the Dismiss module to display an X button next to the error message.
Can I add some functions to the X button to bypass the validation when it is clicked?
And here is the script for the Dismiss module, :
(function ($) {
Drupal.behaviors.dismiss = {
attach: function (context) {
$('.messages').each(function () {
var flag = $(this).children().hasClass('dismiss');
if (!flag) {
$(this).prepend('' + Drupal.t('Close this message.') + '');
}
});
$('.dismiss').click(function () {
$(this).parent().hide('fast');
// some functions to bypass validation to the field?
});
}
}
})(jQuery);
I don't know what to do to after the //. Or is there any other ideas that will work?
AS per the you requirement mention
Take this example
You have created webform having field like
Firstname with required field
Lastname with required field
Then Next button button
When user click next button then error show because you have make the fields are required
When your showing "Dismiss button" next to each field.
Whenr user click "Dismiss button" that time you have to remove "required" attribute of field using jquery or drupal ajax
After that when user click next button then user not get any kind of required field validation error.
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)