Selecting popup without title and clicking button inside it with geb - selenium

I have a popup without title and I want to detect the window using any other criteria (for example a div that wraps the whole popup) and click a button inside it.
I've tried the following:
when:
withWindow({ $("div", class:"main.msgAlert" )}) {
$('#close').click()
}
then: true
But I always get a org.openqa.selenium.ElementNotVisibleException at te #close action.
Am I failing at detecting the window or is the error related to the button?

Related

How to have a div rather than a button for pivot link

I want to customize a PivotItem to make it close-able (kind of like browser tabs).
I provided a custom onRenderItemLink implementation do display an X icon on the right side of the tab, and an onClick method on that icon that will close the tab.
The main issue I'm facing is that this PivotItem is wrapped with a button (Pivot.Base.tsx renders a Commandbutton), that intercepts all onClick events on Firefox.
Firefox does not allow onClick events under a Button (this seems to be in accordance with the standard, so it's not considered a bug), so i can never close a tab on Firefox.
Is there any way to force Fabric UI to create a div rather than a button in this scenario?
Is there any other way to force a div there (some way to intercept what fabric ui creates and switch the button with a div)?
Advice appreciated.
Ended up closing the tab if the button was clicked on its right side
const clickX = clickEvent.pageX;
const buttonRight = clickEvent.currentTarget.offsetLeft + clickEvent.currentTarget.offsetWidth ;
if (buttonRight - clickX <= 40) {
removeTab(tab);
}

Getting the name of a button while the progress bar is going on in webdriver

I have one button named "Add" in my web portal. On clicking on that button a progress bar appears and the name of the button gets changed to "Adding" from "Add" and remains "Adding" until the progress bar is not moved to 100%. After the progress bar is 100% complete, again the text of Add button changes back to "Add" from "Adding".
I need to assert whether the name of the button is changing from "Add" to "Adding" or not during the progress bar movement. But the problem is once I click on the "Add" button, then use the assertion, selenium will first click on "Add" button, completes the progress bar to 100% and then tries to assertion, but now already the text of "Add" button is already changed back to "Add" from "Adding".
Please give the solution. Thanks in advance.
You can find the element, click and immediately return it's text which can be used later for Assert
public string Test()
{
IWebElement element = Driver.FindElement(By.CssSelector("Something"));
element.Click();
return element.Text;
}
Assert.IsTrue(Test().Contains("Adding"));
Note: C# code

Tool Tip obscures button

I want to pop up a tool tip when mouse moves over button, to explain what will happen if the user clicks on the button.
This code seems to do the job ( except for a big snag )
wxHelpProvider::Set(new wxSimpleHelpProvider);
...
btnDisplay = new wxButton( this, -1,
"DISPLAY", wxPoint(10,35));
btnDisplay->SetHelpText("Click to display this dimension");
btnDisplay->Bind( wxEVT_ENTER_WINDOW, &cHiddenDimensionPanel::OnDisplayHelp, this );
...
void cHiddenDimensionPanel::OnDisplayHelp(wxMouseEvent& event)
{
wxHelpProvider::Get()->ShowHelp((wxWindowBase*)event.GetEventObject());
}
The snag is that the tooltip obscures the button! If I click on it, the tool tip vanishes for a moment, but immediately pops back up. It is not possible to click the button under the tooltip.
You should be using the SetToolTip(const wxString &tipString) method, and letting wx handle showing/hiding the tooltip - not re-appropriating the HelpText property and manually managing the tooltip display.

How to open dialog or popup when clicking on a cell in Dojo Dgrid

I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }

Dynamic menu button items in TinyMCE

I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!