Most of my application's elements are under shadow-root(open). I need to automate them using Protractor framework. deepCSS didnt work out. Please help me with automating these elements - mostly click.
I have to click on shadow-root elements using my protractor automation framework. I tried deepCSS, xpath etc. nothing worked.
var spanElem = element.all(by.deepCss('.heading'));
spanElem.click()
//browser.actions().mouseMove(spanElem).click().perform();
Similar questions:
deepCss is failing to identify an element inside the shadow root in Protractor
Protractor: Unable select input element inside a shadow DOM (Polymer) using by.deepCss('input')
It seems Shadow DOM is not yet well supported by protractor. The Second question has an answer pointing to this issue https://github.com/angular/protractor/issues/4367 and a workaround for adding a custom locator by.addLocator('css_sr', (cssSelector: string, opt_parentElement, ..... I confirm this works in my case too.
Related
I tried to test a webview in flutter app using flutter appium driver and faced a problem:
In a webview I have a text, that is placed in two lines. Because of that placing text is covered by another element.
I tried 3 approaches:
1.appium driver: mouse.moveTo then mouse.click.
Solution with mouse.moveTo then mouse.click did not work because appium need other parametr called duration, that is not included to parameters in our appium_driver.
2. Used flutter inspector to locate elements on the webview - solution was not succeed because this webviews are external and were not covered by any flutter overlay.
3. Clicking by bounds
Got all objects from the webview with TESTWorld().appiumDriver.pageSource. Found out that we have the xml with all objects on webview with properties as bounds,text. Made a list with 3 objects of “MyString“ string and clicked on them one by one with click() method from appium_driver. Second element “MyString“ is clickable, appium can click on it, but first instance of this string is in two lines, so this element is part of other big element, that’s why appium_driver can’t click on it.
Maybe someone knows another approach?
Because of that placing text is covered by another element
In a particular case, it sounds like an AUT issue. Appium uses WebDriver API for testing WebView and it is expected to not be able to interact with the overlapped element.
If there is no way to address and fix it in the app, you can try JS to send a click action (the same way we do in Webdriver):
WebElement textElement = driver.findElement(...);
JavascriptExecutor jsEx = (JavascriptExecutor)driver;
jsEx.executeScript("arguments[0].click();", textElement);
I am new to automation, and my previous experiences were with non-Angular apps, thus i start to use Protractor.
I want to navigate throught the website, though cannot find the right selector.
The button is highlighted in red on the bottom of the screen:
I've tried below code among many:
element(by.name('Flota')).click()
or
element(by.css('.ng-tns-c11-5')).click()
element(by.css('div[title=Flota]'));
maybe you should target the <a> or <nb-icon> element instead?
Try the following locators:
using a:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active'));
or nb-icon:
element(by.css('.menu-icon.ng-tns-c11-16.ng-star-inserted'));
Additionally, if you need to target the <span> element:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active span'));
I suggest
by.css("a[title='Flota']") //if this is the button you are looking for
Since the shorter is locator - the better
your help was much appreciated!
Unfortunately, i tried all options you provided and didn't work, though i made additional trial and error runs.
The code i worked out is below, maybe it will help another newbie like me:
element.all(by.css('#menu-item ng-tns-c11-4 ng-star-inserted li')).click()
I am working on an application which is developed in ExtJs and is a HTML 5 type.
I an confronting a problem while interacting with button clicks and selecting drop down elements where only one option is present in the DD list.
Is this a problem with my Webdriver Code
Is this a problem with Eclipse (By Kepler)
Or is this a problem of HTML 5 or ExtJs
If driver.findElement(By.something).click(); is not working for you you cant try click through java script:
((JavascriptExecutor)driver).executeScript(script, element);
Example:
WebElement element = driver.findElement(By.id("MainButton"));
((JavascriptExecutor)driver).executeScript("arguments[0].click()", element);
HTML 5, at the time of writing, is not fully supported with Selenium IDE. A good
example of this is elements that have the contentEditable=true attribute. If
you want to see this, you can use the type command to type something into the
html5div element. The test will tell you that it has completed the command but
the UI will not have changed
My registration is using Spring forms and validates the data after submit, the form:errors will be printed out if there are errors. I need to scroll the page down to the first form:error so the user hasn't to search for the error, is there a way to do that?
cheers
I haven't tried any of them, but I can think of two possible ways:
With Javascript. Spans generated by < form:errors /> have a class (I don't remember at the moment) or you can force on using cssClass attribute. Would be very easy using this jQuery plugin to scroll to the first one.
Without Javascript. This will be a lot more difficult and I'm not sure it will work:
In your controller, instead of returning a direct view you must do a redirect to something like /myForm#error.
In order to don't lose your model, you must use FlashMap attributes.
"Subclass" < form:errors /> tag. It must have the same behavior but it has to include an anchor named error on the first error of the page.
I think you can do it with anchors. -- But you need to implement it by your own.
My idea it to put anchors on all input files. And then have some java script that is able to scoll to an anchor. This java script is invoked on page load if the error object contains errors. -- This errors contains the name of the field. So if you have some schama for naming the anchors it should be possible to invoke the jump to an anchor script with the name of the field hat has an error.
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.