elementIsNotVisible throwing noSuchElementError in Selenium - node.js

I wrote a test to ensure a slideout panel closes in my selenium tests using node js. Whenever I close the panel I use the condition elementIsNotVisible. However an error is thrown, noSuchElementError. This error is technically correct because the element should no longer be on the page, but shouldn't elementIsNotVisible be correct as well?
Test.js file:
await driver.wait(until.elementIsVisible(testPage.addAllAnnotationsButton(driver)), 20000);
await testPage.exitGeneAnnotationsButton(driver).click();
await driver.wait(until.elementIsNotVisible(testPage.addAllAnnotationsButton(driver)), 20000);
Page.js file:
const testPage = {
addAllAnnotationsButton: driver => driver.findElement(By.css(testPage.addAllAnnotationsButtonSELECTOR))
}
Error message(Note- Error message is thrown on the line where elementIsNotVisible is called):
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"div.slideout.opened:nth-child(6) button.ui.button.medium:nth-child(2)"}
Edit 1: Please note, I have tried using stalenessOf and I still receive the same error.

As you have mentioned that when you close the panel, you use the condition elementIsNotVisible :
Here once you have closed the panel , the respective web element is not present in DOM. That is the reason you are getting NoSuchElement exception.
Suggestion : Use invisiblityofElement instead of elementIsNotVisible.
Though there are many reasons behind NoSuchElement Exception, one of the most common is try to interact with element/elements present in frame/iframe without switching the focus of web driver.
Hope this will help.

Related

Playwright fails to fill input

I'm running a Playwright script on a Jenkins page that has input elements. When I try to fill one of the inputs with text, it fails with this error:
(node:3337) UnhandledPromiseRejectionWarning: page.fill: Protocol error (Page.insertText): error in channel "content::page": exception while running method "insertText" in namespace "page": Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsITextInputProcessor.commitCompositionWith] _insertText#chrome://juggler/content/content/PageAgent.js:891:32
I've tried running with DEBUG=pw:api environment enabled but the logs there aren't too helpful. From the normal console log I get the following log:
waiting for selector "input[name="_.buildNumber"]"
selector resolved to visible <input value="" type="text" name="_.buildNumber" class=…/>
elementHandle.fill("54")
waiting for element to be visible, enabled and editable
element is visible, enabled and editable
So it seems like the element exists and can be edited but for some reason Playwright is unsuccessful at trying to fill it. What am I missing here?
This is a Playwright bug that is specific to Firefox. To get around it for now, you should be able to switch to using either Chrome or Safari in your import statement. So either:
import { chromium } from 'playwright';
Or using Safari:
import { webkit } from 'playwright';

Puppeteer on Raspberry PI on ubuntu sometime gives "Evaluation failed: TypeError: Cannot read property 'textContent' of null"

This code runs correctly locally every time. However, when I deploy to the server (ubuntu on Raspberry Pi using chromium-browser) I sometimes get errors around 3/10 attempts. This code works best...
await page.goto('http://mywebsite.com')
const element = await page.$('div[class="user-tags"]')
const value = await page.evaluate(el => el.textContent, element)
but sometimes returns... "Error Getting Experience Level Error: Evaluation failed: TypeError: Cannot read property 'textContent' of null"
So I looked around for solutions and tried this but it fails every time (both code blocks run locally fine)...
await page.goto('http://mywebsite.com')
await page.waitForSelector('div[class="user-tags"]')
const element = await page.$('div[class="user-tags"]')
const value = await page.evaluate(el => el.textContent, element)
Which throws " Error Getting Experience Level TimeoutError: waiting for selector "div[class="user-tags"]" failed: timeout 30000ms exceeded 9/10/2020 # 06:02:35"
Thanks for any suggestions!
The difference between first and second code snippets
In the second code sample you instruct puppeteer to wait until div[class="user-tags"] exists on the target page:
await page.waitForSelector('div[class="user-tags"]')
That is the correct way of getting data from an element - first make sure it is available, then query it.
Timeout error happens because the given element is not found within 30 seconds (it is the default timeout).
Ways to solve this
First you need to figure out why the element is not found by the puppeteer.
Maybe div.user-tags is not supposed to be present on every page?
Maybe Raspberry Pi is not powerful enough to load and process the target page in 30 seconds? - It is possible to increase the timeout.
You can also wait until the page is completely loaded, this way puppeteer will make sure all of the resources are loaded before going on with the script:
await page.goto(url, { waitUntil: 'networkidle0' })

#material material-component-web Invalid tab component given as activeTab

firstly let my say that the mdc documentation is difficult for non-pros like me.
I'm using Elixir Phoenix and Brunch.
I import and everything is fine.
import {MDCTab, MDCTabFoundation} from '#material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '#material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'#material/tabs';
I manually instantiate the tab bar in a separate function that I export
export var Tabbable = {
run: function(MDCTabBar, el){
var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));
Which is following the documentation like this
const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));
but is slightly different to the documentation's use of the tab bar in their code snippet
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
But, whenever I try to use mdc I get a 'not defined' error. Therefore, I'm not using it :-)
Now, when the user clicks the tab bar I capture that like this:
myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
});
The subtle difference is that my myDynamicTabBar is MDCTabBar but the documentation's dynamicTabBar is mdc.tabs.MDCTabBar
My tab control works, but it throws an error only visible in the console:
Uncaught Error: Invalid tab component given as activeTab: Tab not
found within this component's tab list
which is likely because I'm not using mdc.tabs? The documentation notes the change event happens on the MDCTabBar.
Therefore, how do I get rid of this annoying error in the console?
And why can I not access the global mdc? I have tried this in my Brunch file
globals: { mdc: "#material"}
But no good.
I'm right behind you on this! I'm frustrated with the docs too :(
You answered your own question in this Elixir thread which is very informative.
I found the real solution in this thread https://github.com/hyperapp/hyperapp/issues/546
MDCTabBar automatically initiates its children. So initiating tabs will result in that error.
The fix is to just initiate MDCTabBar

How to make ZombieJS wait indefinitely for a site

I'm using zombieJS to scrape a veeeeeeeery slow site. I tried many things to make it go slower, but I'm receiving lots of
TypeError: Cannot use 'in' operator to search for 'compareDocumentPosition' in null
errors.
I tried to add to my pressButton function the following:
browser.wait({waitDuration: '700s', element: "pre"});
while initializing the browser with this configuration:
browser = new Browser();
browser.maxWait = 10000000;
browser.runScripts = false;
browser.loadCSS = false;
browser.waitFor = 500000;
but I'm still receiving the above mentioned error after a few seconds...
I think this might apply to you: Zombiejs jQuery nullTypeError 'compareDocumentPosition'
your site is so slow, that the tag cannot be found early enough from zombie. Would you please so kind, to open a new issue for assaf on github? We tried to track down the cause of this random-error earlier, but now I think it's caused because zombie should wait for the first dom element to be loaded
I also had similar problem and it got solved by removing debug option, while creating instance of browser. Also downgrade to v1.4.1 as 2.0 is in alpha stage

How do find active element in Intern

According to the documentation linked from the Intern Git project (https://github.com/admc/wd/blob/master/doc/api.md) it should be possible to use active() to obtain the active element on the page...
However, when I use this I don't see my callback or fired or get any output, e.g...
.keys(specialKeys.Tab)
.sleep(1000)
.active(function(err, element) {
console.log("Active Element is: ", err, element);
})
However I'm not seeing any output at all, nor any error conditions... I am however seeing the tab event occurring. Any ideas on what I'm doing wrong here?
Many thanks.
The functional API in Intern is Promise-based, so you don’t pass callbacks into any of the methods except for then, otherwise, or always. Step 4 of the Intern tutorial describes this in more detail. Your code would be:
.keys(specialKeys.Tab)
.sleep(1000)
.active()
.then(function(element) {
console.log("Active Element is: ", element);
})

Resources