I'm using Chrome dev tools to check my css selectors when writing E2E-Tests using Playwright (or Puppeteer).
To verify a selector is valid and can be found I use the cmd+f search-bar in Elements-Tab in DevTools like this:
But how can I find selectors inside shadow-root?
Just to make clear: This selector can be found via code. I just can't find it in the DevTools
This can be done in two stages using shadowRoot.
First assign element with shadow dom to a constant, then use querySelector to target element(s) inside shadow.
const element = document.querySelector('wc-article-editor'):
element.shadowRoot.querySelector('.myclass');
Related
In tinymce 5.0, my init contained
mode : "specific_textareas",
editor_selector : "mceEditor",
in order to convert any textarea with the class "mceEditor" into a tinymce editor. In 6.0, that doesn't seem to work. It seems that "mode" is no longer used, and I found some docs on their site that said you can now select a single textarea using an ID by specifying:
selector : "textarea#elementid"
but I wasn't able to find any info on selecting textareas by class. On a whim, I tried the following:
selector : "textarea.elementclass"
and it seemed to work. But since I didn't see any docs referencing selection by class, I wanted to find out if this truly is the way to select multiple textareas based on their class.
Thanks!
It is actually mentioned in the documentation. The selector option utilizes the default CSS selector syntax:
Selector configuration is required for TinyMCE integration. Selector
configuration uses CSS selector syntax to determine which elements on
the page are editable through TinyMCE.
Therefore, you were right when using
selector : "textarea.elementclass"
I mean hiding the menus in the red box, and only show the console.
Yes it is possible, with a devtools extension and the "Allow UI themes" experiment (see the "Official method" part of my answer at Custom.css has stopped working in 32.0.1700.76 m Google Chrome update). With this method, you will be able to define arbitrary stylesheets for the devtools.
/* Contents of Custom.css, use with https://stackoverflow.com/a/21210882 */
.tabbed-pane-header-tabs[aria-label="Panels"] .tabbed-pane-header-tab:not(#tab-console),
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-header-tabs-drop-down-container,
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-tab-slider {
display: none;
}
To find the above CSS selectors, I inspected the devtools, and made sure that the selectors are specific enough. The first part of each selector is to select the top row (the right part of the selector would also match tabs within the Elements/Sources panel). Instead of display:none, I used background:red (with varying colors) to more easily visualize the impact of the proposed changes.
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);
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.
The doc http://code.google.com/chrome/devtools/docs/elements.html says it supports XPath or CSS selectors, but when I tried, didn't seem to work for me.
Any one knows how to use it?
You can use $x in the Chrome javascript console. No extensions needed.
ex: $x("//img")
Just typing xpath expression in the search box should work. It works for me in tip-of-tree build.
The feature seems to be broken in Chrome 11 though, I've filed a bug on this: http://crbug.com/79716
For xpath searches use $x('xpathSelector').
For a css selector use $('cssSelector').
However, this last selector returns only the first matching element. If you want to see all matching elements go for $$('cssSelector')
If you click on any element in the elements pane then type command-F, it will open a search bar that lets you search for elements using xpath selectors.