I have below scenario -
Launch browser and do some operations
Click on a button, a new tab opens
switch to new tab.
In new tab, switch to iframe and perform
operations inside frame.
How can I handle this in playwright? Once I switch to new tab, all elements are inside frame, so I want to switch to new frame after switching to new tab
Note - Frame doesn't have name. I can use xpath to identify frame.
will page.frame("xpath to iframe") work?
If anyone can provide small code snippet, would be really helpful.
I Tried using page.frame("xpath locator to iframe") - but not working
You can switch to the new tab like this.
const [newTab] = await Promise.all([
page.waitForEvent('popup'),
page.locator('your locator here').click(),
]);
await newTab.waitForLoadState();
Related
On the Column Visibility example on https://vaadin.com/docs/latest/ds/components/grid/#column-visibility the code shows a class ColumnToggleContextMenu which isn't part of the Vaadin API however it seems to somehow adjust how the button is hooked so that it can be left clicked rather than the default right click for a context menu. With that in mind the code below will only show the context menu on a right click, I cannot get it to work like the example code. My code is:
Button showHideColumnsButton = new Button("Show/Hide Columns");
showHideColumnsButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
ContextMenu contextMenu = new ContextMenu(showHideColumnsButton);
for(Grid.Column column : grid.getColumns()) {
contextMenu.addItem(getColumnName(column), e -> showHideColumn(column));
}
I'm considering using a MenuBar instead to see if that will work but I'd prefer to figure out how to use a Button if possible as that seems more appropriate (mainly because it allows the checkbox to show if a column is visible or hidden).
In order to make the context menu to open on left click use setOpenOnClick(true):
Button showHideColumnsButton = new Button("Show/Hide Columns");
showHideColumnsButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
ContextMenu contextMenu = new ContextMenu(showHideColumnsButton);
contextMenu.setOpenOnClick(true)
for(Grid.Column column : grid.getColumns()) {
contextMenu.addItem(getColumnName(column), e -> showHideColumn(column));
}
my code :
final searchMenu = await myPage.waitForXPath('//*[#id="MenuBar1"]/li[4]/a');
searchMenu.hover();
final outClaims = await myPage.waitForXPath('//*[#id="MenuBar1"]/li[4]/ul/li[2]/a');
outClaims.click();
error text :
Node is either not visible or not an HTMLElement.
my code work just fine by selecting the search menu and makes its option visible for the user as in picture1.
picture 1
html code while search menu is selected
html code when the search menu is not selected
Seems to be a problem with your xpath. Try this
//ul[#class='MenuBarSubmenuVisible']//a[contains(text(), 'Out Claims')]
The web application that I'm working with consists of a jsTree (v3.1.1) with the contextmenu plugin. This is all working correctly, but when I right click on a node that is close to the bottom of the page it cuts off some options. See image below:
Contextmenu on jsTree getting cut off if too close to the bottom of the browser window
I have had a look at the jsTree API Show at Node, but this just specify whether the context menu should display below the selected node or at the position of the mouse click.
If someone could please provide me with some guidance on how to calculate that if there is not enough space for the entire context menu to be displayed (all options visible), to display it in such a way that the user is able to see all the options. If a node is selected and there is enough space for the context menu, it should work like it is currently by default.
So I know what to do, but it is the how & where I'm not sure on how to implement it on the jsTree where I'm struggling:
Get location of the node selected
Determine height of the context menu
Determine available space from the select node to the bottom of the browser window
If available space is less that that of the context menu, display the context menu to the top of the node. If there is no space issue, display as it does currently.
Any assistance would be appreciated.
Surely there is a more elegant solution but you may wait for it quite long.
As a quick fix I propose simply to move the context menu to the position you want after it is shown. A user won't notice it anyway. See below and check fiddle - Fiddle. Probably you would want to check if node is at screen bottom before moving menu which I haven't done.
$("#dutchData")
.on("show_contextmenu.jstree", function (e, data) {
var $node = $('#'+data.node.id),
$menu = $('.vakata-context').first(),
nodeTop = $node.offset().top,
menuTop = nodeTop + $node.height() - $menu.height(),
menuLeft = 200,
$subMenu = $menu.find('ul'),
subMenuTop = $menu.height()-$subMenu.height();
$menu.offset({left: menuLeft, top: menuTop });
$subMenu.offset({top: subMenuTop });
})
.jstree({
"core" : {
"data" : data,
"themes": {
"url": true,
"icons": true
}
},
plugins: ['contextmenu']
});
I currently have a TabSet of tabs.
List<Tab> tabList = new ArrayList<Tab>();
tabList.add(createTab("tab1", "Tab1", new TabPanel()));
tabList.add(createTab("tab2", "Tab2", new TabPanel()));
TabSet tabSet = new TabSet();
tabSet.setTabs(tabList.toArray(new Tab[tabList.size()]));
I want to be able to add a double click handler in a grid, by double clicking something, it will switch to one of the tabs Im not currently on. How do I achieve this?
In your click handler call selectTab() on the tabSet. Just pass in either the zero based index of the tab, the string id of the tab, or the particular Tab instance.
Does anyone have example code illustrating how one would use the "MXTouchViewGroup*" code in the framework to create/use a tab bar at the bottom. Looking at code for MXToughViewGroup*, it isn't 100% clear how I would setup/use the navigation framework with a tab bar. Unfortunately the MonoCross book also has no examples of this case.
Any help would be appreciated.
Thanks in Advance.
So after poking around in MonoCross source, I've figured out how one would use a MonoTouch/iOS tab bar while using the MonoCross pattern, and specifically while continuing to use MonoCross.Navigation to move around your app:
//------- MonoCross Shared Application
// Main Menu
NavigationMap.Add("Menu/Tab1", new Tab1Controller());
NavigationMap.Add("Menu/Tab2", new Tab2Controller());
NavigationMap.Ass("Other", new OtherController());
// Set default navigation URI
NavigateOnLoad = "Menu/Tab1";
//------- MonoCross.Touch Container
// init monocross application
MXTouchContainer.Initialize(new SharedApplication(), this, window)
// Add view to container as usual
MXTouchContainer.AddView<ModelTab1>(typeof(Tab1View),ViewPerspective.Default);
MXTouchContainer.AddView<ModelTab2>(typeof(Tab2View),ViewPerspective.Default);
MXTouchContainer.AddView<ModelOther>(typeof(OtherView),ViewPerspective.Default);
// Create a MXTouchViewGroup, with items representing tab items
MXTouchViewGroupItem[] menuItems = new MXTouchViewGroupItem[] {
new MXTouchViewGroupItem(typeof(Tab1View),"Tab 1!",""),
new MXTouchViewGroupItem(typeof(Tab2View),"Tab 2!",""),
};
MXTouchViewGroup tvg = new MXTouchViewGroup(new MXTouchViewGroupTabController(),menuItems);
// Add the group to MXTouchContainer.ViewGroups
List<MXTouchViewGroup> ltvg = ((MXTouchContainer)MXTouchContainer.Instance).ViewGroups;
ltvg.Add(tvg);
// navigate to to starting location now
MXTouchContainer.Navigate(null,MXTouchContainer.Instance.App.NavigateOnLoad);
In the shared app, create controllers derived from MXController as usual and add them to the NavigationMap. Absolutely nothing special to be done in the "Shared Application"
In The MonoCross Container, you add views derived from MXTouch*View as usual to the container as usual as well. What is done differently is to create a "MXTouchViewGroup" with one "MXTouchViewGroupItems" created for each tab; each "MXTouchViewGroupItem" has one of your views associated to it. You'll want to create an appropriate "MXTouchViewGroup" item for your tab bar, and then add the group to your "MXTouchContainer" as shown, and then let the framework navigate to the first view as usual.
The result of all this is that when navigating to a view that is in a "group" (i.e. "Tab1View" or "Tab2View"), the framework will automagically render a tab bar with the view, without any further intervention. If you navigate to a view that isn't in a "group" (i.e. "OtherView"), the tabbar will not render.
That's it.