I am trying to click on a element which is visible only after hovering.
browser.actions().mouseMove(element(by.css(".frx-mywork-main-block .frx-mywork-main-body-block3"))).perform();
browser.sleep(5000);
element(by.css(".frx-mywork-main-block .frx-mywork-main-overlay .frx-mywork-main-overlay-body div:nth-child(2) span i")).click();
The class 'frx-mywork-main-overlay' is visible only after the hovering.The action hovering is successfully done while running the script, but it failed on clicking the element after hovering in Chrome browser.But this code is sucessfully clicking while running in Firefox.In chrome, it says element is not clickable at point (259, 504).i have attached the screenshot of the html page below.
How can i solve this?Thanks in advance.
Try the below one after hover
var elm = element(by.css(".frx-mywork-main-block .frx-mywork-main-overlay .frx-mywork-main-overlay-body div:nth-child(2) span i");
return browser.executeScript("arguments[0].click();", elm.getWebElement());
Hope it helps you
Related
I am trying to click radiobutton, the related tag for this looks something like "::before==$0" in DOM. How to select this? I thought "input" is the tag for radiobutton, but on hover got "::before==$0" as the related hover, developer says its CSS tag.
Any idea?
Try the below locator
const radioButton = element.all(by.css('fs-18-light.mc-od');
await radioButton.get(0).click(); // TO select 4 Jul 2019
Increase the index based on the radio button you want to click
Hope it helps you
Yes AquariusPotter, div.row.label-data is the element was suppose to be used instead of ::before or input tag. Devtools never highlighted div.row.label-data as the corresponding element bt it had worked when i interacted with div.row.label-data for radio button.
I tried this and it worked!!Thanks all
I am writing test cases in protractor using chromedriver
I have a link which when clicked gives an overlay div pop up where I can enter few details and Add details. After adding the details again the main page and link is visible. But when I am trying to click on the main link second time I am getting
WebDriverError: unknown error: Element is not clickable at point (330, 367). Other element would receive the click:
I tried using the below code still issue is not resolved
browser.wait(EC.elementToBeClickable(link)).then(function(){
link.click().then(function(){
browser.sleep(3000).should.notify(next);
});
});
Can someone please help
I have seen this in my application before, Once you close the pop-up you have to wait for the window closing animation to finish. Your flow should be something like below
browser.wait(EC.elementToBeClickable(link),5000)
//Fill the pop-up
element(by.css('.textArea')).sendKeys('jhghaskjdhkjasd')
//close the pop-up
element(by.css('.close')).click()
//wait for the pop-up to close
browser.wait(ExpectedConditions.invisibilityOf(element(by.css('.pop-up'))),5000)
Also as a side point, you don't need to chain all webdriverJs promises.They are already placed in queue using Protractor control flow
I am trying to Right click on an element and then select an option "Rename" from the list. I have got "right clicking" working but can't select option from the list. Referred links 1, 2
Note 1:
1: On right click the menu options that are visible are native context menus. So, they don't appear in my DOM that I can see.
2: The App runs only in Chrome browser(not sure if it is a browser issue)
I have tried the following code:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).perform();
Consider, "Rename" to be the third option in the list.
Note 2:
If I am just running the app and enter 'R' from my keyboard, it selects the "Rename" option. But when I tried to run it in my test, it doesn't select the "Rename" option. See below code I tried:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.ARROW_RIGHT).sendKeys('R',protractor.Key.ENTER).perform();
None of the above code works. Let me know if more information is required.
EDIT:
I am guessing the following to be happening:
once I mouse over, the script "right clicks" and after that the "tooltip" is displayed. Since the "tooltip" is displayed after "right click" I think the menu list goes to the background(the list is still visible along with the tool-tip), which is why the arrow down keys aren't working. Is this possible? If yes, how can I wait for the tooltip to be invisible and then right click?
Input: I tried to wait for tool-tip to be invisible and then right click, but still the "Arrow_down" doesn't work.
Is there a way to bring the menu list in the front once we have right clicked?
IMPORTANT:
I took a screenshot after I right clicked on the element, and the screenshot doesn't show the "menu list". Below is the code for screenshot:
browser.actions().click(protractor.Button.RIGHT).perform()
.then(function() {
browser.takeScreenshot().then(function(screenShot) {
writeScreenShot(screenShot, "image.png");
});
});
//writeScreenShot takes two variables actual screenshot data and the file name. And the screenshot is saved as "image.png"
What needs to be done?
When you send ARROW keys to the browser, you have to send them as keys instead of passing them to click() function and the ARROW_DOWN key is part of Key object and not BUTTON. Here's how -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).perform();
For your second try, you should send RIGHT in the place of protractor.Button.ARROW_RIGHT to right click. When you send two actions/keys to sendKeys() function, you have to join them using chord object which combines the action of pressing two keys at a time(ex: CTRL+C for copy). But in your case i don't think its really necessary. Here's how to use it -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.chord("r", protractor.Key.ENTER).perform(); //Not necessary as you wont be pressing R+ENTER in your keyboard
OR
browser.actions().click(protractor.Button.RIGHT).sendKeys('R').sendKeys(protractor.Key.ENTER).perform();
Hope this helps.
use XPath to solve your problem
browser.actions().mouseMove(target).perform();
browser.actions().click(protractor.Button.RIGHT).perform();
element(by.xpath('//*[#id="context-menu"]/ul/li[1]')).click();
In your case it will be "//*[#id="context-menu"]/ul/li[3]" most probably.
I have a ListView that displays a list of Panels, one below the other. Every panel features a button (implemented via AjaxLink) that closes the panel and removes it from the list.
This is how the ListView is initalized and how the panels are created:
panelsList = new ArrayList<MyPanel>();
pnlContainer = new WebMarkupContainer("pnlContainer");
ListView<MyPanel> pnlItems = new ListView<MyPanel>("pnlItems", panelsList) {
#Override
protected void populateItem(final ListItem<MyPanel> item) {
item.add(item.getModelObject());
item.add(new AjaxLink<Void>("pnlClose") {
#Override
public void onClick(AjaxRequestTarget target) {
panelsList.remove(item.getModelObject());
target.add(pnlContainer); // repaint panel container
}
});
}
};
pnlContainer.setOutputMarkupId(true);
pnlContainer.add(pnlItems);
add(pnlContainer);
This works so far - the actions that trigger adding new panels (usually also AjaxLinks) do what they should and the new panel is added and displayed correctly. But I have problems getting the close button to fully work.
Please see the following steps:
1) I start the server and navigate to the main page. The ListView is initially populated with one panel.
Close-button-code of this panel:
<a wicket:id="pnlClose" id="pnlClose7" href="javascript:;">Close</a>
Searching the page code for pnlClose7 finds the following javascript code that makes the button work as expected:
Wicket.Ajax.ajax({"u":"./?0-1.IBehaviorListener.0-pnlContainer-pnlItems-0-pnlClose","e":"click","c":"pnlClose7"});;
Note: I do not press the button now, if i would, it would work as expected (thoroughly tested).
2) I trigger an action that opens a second panel. The panel is displayed below the first one as expected.
Close-button of the first panel:
<a wicket:id="pnlClose" id="pnlClosef" href="javascript:;">X</i></a>
Close-button of the second panel:
<a wicket:id="pnlClose" id="pnlClose10" href="javascript:;">X</i></a>
But now, neither searching for pnlClosef nor pnlClose10 finds some javascript code. The buttons (both!) do not work. I can still find the javascript code for pnlClose7.
3) I reload the page via pressing F5.
The button IDs change to pnlClose1a and pnlClose1b. Both IDs have javascript counterparts and work.
4) I press the first button (upper panel, ID pnlClose1a). The panel is closed as expected.
The remaining button's ID changes to pnlClose1c, again without a javascript counterpart. Javascript code for pnlClose1a and pnlClose1b is still present.
To make a long story short, the javascript handlers for my AjaxLinks seem to have shyness issues and only appear after I press F5 or reload the whole page in any other manner. I guess thats because repainting the pnlContainer changes the IDs of the current panels - but why is the linked javascript not updated at the same time? Is there anything I can change in my code to update the whole page without completely reloading it?
Wierd thing is that I am pretty sure this worked before... But I checked the whole class history and can't find any major change that would have triggered that. The ListView-code is mainly static since I added it.
I was had similiar problem. if you have any hardcoded javascript code in your page or panels html file (using <script> tag) remove it and set that js code in renderHead of your panel.
We have an AutoCompleteExtender linked to a TextBox. Both controls are placed inside an UpdatePanel, and the UpdatePanel is displayed as a pop-up dialog using a Javascript library (Ext.BasicDialog).
The pop-up is a div on the page, not a separate window.
The problem is that when the user scrolls inside the pop-up, the AutoCompleteExtender shows its menu in the wrong place. It looks like it is taking the visible distance from the top of the popup and positioning the menu from the top of the inner html of the popup (which is not visible)
We are using Version 1.0.20229.20821 of the AjaxControlToolkit, and we are targetting ASP.NET Framework vewrsion 2.0.
I have tried to fix the menu by attaching the following Javascript to the OnClientShown event, but it pretty much does the same thing:
function resetPosition(object, args) {
var tb = object._element; // tb is the associated textbox.
var offset = $('#' + tb.id).offset();
var ex = object._completionListElement;
if (ex) {
$('#' + ex.id).offset(offset);
}
}
I fixed this by setting position:relative on a div containing the TextBox and the auto-complete extender. The extender must have been using the wrong element to position on when inside the popup panel.
Add an empty <div id="AutoCompleteContainer"></div> element right after the AutoCompleteExtender. In AutoCompleteExtender, add an attribute pointing to this container, CompletionListElementID="AutoCompleteContainer". The list items should be contained in that div then.
I know this is an old post, but thought this information may help someone else. There is a newer version 15.x of the Ajaxtoolkit now (April 2015) and it fixes this issue. From my reading the CompletionListElementID property was deprecated some time ago, and at the least seems to behave differently in different versions. I upgraded my references to the 15.x version and it just started working as needed.