This error has prevented me from using cypress for months now 😟
/// <reference types="cypress" />
describe('User login', () => {
beforeEach(() => {
cy.visit('http://localhost:8080')
})
// ...
})
i'm getting an error that says:
(uncaught exception)TypeError: Failed to set an indexed property on 'DOMStringList': Indexed property setter is not supported.
More details:
app specs:
react 16.14.0
react-router-dom 4.3.1
react-redux ^5.0.4"
it seems the error is from something loading (assuming webpack)
GET 200 /sockjs-node/info?t=1672024046431
I notice if i comment out a specific component (the header bar) that the rest of the app seems to load
When you see (uncaught exception) it's generally your app that is causing it.
You cannot change anything in the test code to actually fix it, which is pretty obvious since your test does not do anything except visit the page.
You can make Cypress turn a blind eye to this particular error by catching the fail event and returning false from inside the handler - that tells Cypress to carry on as if the error did not occur.
But now this is likely to be trouble later on, since it looks like the step is in authorization and you won't get very far without that.
The event catcher should be at the top of the spec and is this code:
Cypress.once('uncaught:exception', () => false)
If you find this is all that's needed, and you can test authorize correctly after that, then keep the code permanently but add a check for the specific error message
Cypress.once('uncaught:exception', (err) => {
if (err.message.contains('Failed to set an indexed property')) {
return false
}
})
But if you continue to get errors after this, I'm afraid you will have to post the React code to get a better answer.
Related
I have a page which contains a rich-text editor. I used CKEditor for this. You pass it a div element and it loads the editor into that element.
Now I wanted to write integration tests for that page. I am using zombie.js with version 4.2.1 (old, I know, but I'm stuck with it) for that purpose. However, I get an error just trying to load the page. The problem apparently happens while trying to load editor into the div element. This is the relevant output:
[some other resources loading]
zombie GET http://localhost:10003/js/lib/ckeditor.js => 200 +0ms
zombie GET http://localhost:10003/js/pages/categories/init.js => 200 +0ms
zombie http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories +68ms
Debug-Output hier:
undefined
{ http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories
cause:
http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories,
isOperational: true }
I know that the error is not related to CKEditor because I tried it with another rich-text editor, which gave me the exact same error (only the property name was different).
The error apparently happens while trying to set the value of the HTML property "data-cke-filler" of a br element. This is the element:
That element is inserted into the editor at the time of creation, it represents the content of the editor, which is empty at the beginning.
I tried to use zombies debugging capabilites, however, as the error occurs while the site loads I don't really get a chance to output anything useful. As far as I am aware, zombie.js should be able to handle loading this page.
So my question is:
What is causing this error and how can I fix it?
Let me know if you need more information.
Thanks.
Edit:
Here is the code where I load the page (it's written in CoffeeScript):
require 'should'
Browser = require '../../support/browser'
describe 'editor page', ->
browser = new Browser({debug: true})
before (done) ->
browser.debug()
browser.visitLoggedIn('/', {name: 'tester', password: 'secret'})
.then (done) ->
browser.visitPage '/editor' # this is what doesn't work
.then (done) ->
console.log 'page loaded'
.catch (error) ->
console.error error
it 'things should appear', ->
...
The visitLoggedIn method is a custom method that just creates necessary cookies for browsing the application as an authenticated user and visits the page using visitPage. visitPage uses zombies visit method. These work fine in all the other integration tests of this application.
Edit 2:
So I managed to "mock" CKEdtor using this answer. This isn't exactly what I wanted, but I decided to try to work with this for now. However, now I get the exact same error! This time the error is thrown inside my own code:
# These are two functions that are run shortly after inserting the editor into the page,
# so basically while the page is still loading.
getLanguageChoice: -> # This one is executed first
document.getElementById('language').value
getMandantChoice: -> # This one second
document.getElementById('shopClient').dataset.name # The error is thrown here
This is the exact error:
TypeError: Cannot read property 'name' of undefined
at Object.CategoriesView.getMandantChoice (http://localhost:10003/js/pages/categories/view.js:49:59)
at http://localhost:10003/js/pages/categories/app.js:22:97
at process._tickCallback (internal/process/next_tick.js:68:7)
This doesn't make any sense to me. Does this mean that zombie somehow can't access the values of data-* attributes? Maybe someone is knowledgeable about zombie and can provide further insight?
After further looking around with the new insights I gained, I found this ticket on the Github page of the project. It looks like the dataset property is not implemented in an underlying library in the used version. As I am not able to upgrade, it's just not possible to load the page like it is...
To work around this, I will refactor my code to not use the data-* property. This is luckily not tied to too much work in my case.
I just started to look into this test automation tool called "testCafe". Here is the tool details: https://devexpress.github.io/testcafe/
In my first test, I am navigating through 2 pages using deep URLs. Here is a scenario
1) Hit the home page URL
2) Navigate to another page using another URL
3) Perform assertion on page 2
I get the following error:
1) Error on page "https://page2url.com":
ReferenceError: initFooterSiteSwitcher is not defined
Here is my code- firsttest.js
import { Selector } from 'testcafe';
import Page from './homepage-model';
import finAdv from './finAdvisorpage-model';
const page = new Page();
const page_finAdv = new finAdv();
fixture `Getting Started`
.page `https://homepageurl.com`;
test('My first test', async t =>{
await t
.navigateTo('page2url.com')
.click(page_finAdv.gottoLink)
.expect(page_finAdv.linktext).eql('Sample text');
});
I looked in the DOM for page2url.com and I found this function in the DOM: initFooterSiteSwitcher(). But as you can see, I am not interacting with this in my test yet I get an error and the test won't move on to the next steps in the test case. Could someone please share some insight on it. Is this an HTML problem with the app itself or my test?
This seems to be a problem with the app. To check it, open DevTools in your browser, navigate to the page without TestCafe, and check the output in the Console tab.
If you can see the error in the Console tab without TestCafe, and the website still works properly, you can ignore this error when running tests by using the -e switch: https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-e---skip-js-errors
If the error doesn't appear without TestCafe, it can be caused by a bug in TestCafe. In this case you can submit a bug report to the TestCafe repository: https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md
Using Extjs 4.1, an intermittent error is occurring.
Sometimes it occurs, but most of the time it does not.
It always occurs when I start the application, so I press F5 and everything returns to normal.
Using this reference to debug the error, I noticed that it occurs at line 29590.
The error message is very generic:
Uncaught TypeError: Cannot read property 'dom' of null
at constructor.finishRender (ext-all-debug-w-comments.js:29590)
at constructor.finishRenderItems (ext-all-debug-w-comments.js:39796)
at constructor.finishRender (ext-all-debug-w-comments.js:40889)
at constructor.finishRenderChildren (ext-all-debug-w-comments.js:44526)
at constructor.afterRender (ext-all-debug-w-comments.js:29331)
at constructor.callParent (ext-all-debug-w-comments.js:6194)
at constructor.afterRender (ext-all-debug-w-comments.js:36521)
at constructor.finishRender (ext-all-debug-w-comments.js:29625)
at constructor.finishRenderItems (ext-all-debug-w-comments.js:39796)
at constructor.finishRender (ext-all-debug-w-comments.js:40889)
Here is an error print
What must be causing this?
I would have made this a comment, but it doesn't fit.
There is a wide variety of reasons I could think of. Most of them are based on asynchronous calls. You definitely have to provide more information for the question to be answerable.
Obviously, me.el is null, which it shouldn't be. So first you have to find which component is causing the problem. For this, you should exchange line 29590 against something like this:
try {
me.container = Ext.get(me.el.dom.parentNode);
} catch(e) {
console.log(me.id);
console.log(me.itemId);
console.log(me.xtype);
...
console.log(me);
throw e;
}
This should give you an idea which component(s) would be affected.
Then show us the code of that component. Also check whether you modify that component's config from outside the component, e.g. from a store load operation or other asynchronous tasks. Plus you should look at whether overrides for the component and its ancestors are loaded from separate JS files - maybe they are sometimes loaded before, sometimes after the finishRender has been called, and fix exactly this error.
These are only a few of the possible reasons.
Anyone knows a trick for filtering out React warnings in the browser console caused by some node module? They are making things harder to debug and at the moment I can't do anything about it.
Whilst not being specific to React:
If you are using Chrome there is an option in the console to filter out which messages are shown. It's the funnel like icon under the Console tab. Then you can choose to filter by Err, Warning, Info, etc...
One option is to overwrite the logging functions of the console object. For example, to filter out "warnings" about the invalid prop type notation that is raised from a package in node_modules, you can add this on top of your main index.jsx file:
const originalConsoleError = console.error;
console.error = (message, ...messageArgs) => {
// console.log({message, messageArgs}); // uncomment only to see what arguments you receive
if (
messageArgs[1] &&
messageArgs[1].includes("has invalid PropType notation inside")
) {
return;
}
originalConsoleError(message, ...messageArgs);
};
You can of course perform more complicated checks - uncomment the console.log to see what message format arguments you receive.
I'm getting an exception from one of my template helpers in Meteor - even though I see my logs just fine.
Template.DashboardHeader.helpers({
avatar: function () {
if (Meteor.user().profile.image){
console.log('yea');
} else {
console.log('nah');
}
}
})
I'll eventually be using it to serve an avatar, depending on whether or not the user has set one in their account. The helper actually works as you might expect and logs the correct output depending on the situation, but I get this big unhelpful exception whenever it's run:
Exception in template helper: .avatar#http://localhost:3000/client/master.js?86599d1d506dfe7d57211f3faa8757db9ba5cb81:16:9
BlazeProvider.helpers/http://localhost:3000/packages/meteorhacks_kadira-debug.js?ee5ca93234e8f5b94a8e5560eb5ea8b7fcbb9c4d:339:26
... a lot more lines later...
Tracker._runFlush#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:485:9
onGlobalMessage#http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:372:11
Given that it doesn't really tell me anything (that I can see/understand) I'm not sure what to be troubleshooting!
Here's the template code (simplified):
<template name="DashboardHeader">
<img id="user-img" src="{{ avatar }}" alt="{{ currentUser.profile.name }}" width="34px" height="34px" />
</template>
Although the exception triggers wherever the {{ avatar }} is placed within the template tags. But doesn't trigger if it's not present in the template. So it seems it's got less to do with the helper itself than how it's being applied.
Anyone knows what's up with it?
This kind of error (huge exception in console but data appears in template) is generally due to a reactive dependency being undefined and queried upon.
Take the following example:
Template.myTemplate.helpers({
'name' : () => MyCollection.findOne().name
})
Depending on data availability or the subscription strategy the above can throw an exception because MyCollection.findOne() is undefined when first called.
However the correct output will still appear once the data is available (subscription kicked in). findOne invalidates its dependencies (including the helper) and because the name is now present it will show in the template.
In your case it means either Meteor.user() or Meteor.user().profile is undefined when first called.
To solve easily you can use some short-circuiting :
//Will return undefined if findOne() is undefined
() => (MyCollection.findOne() && MyCollection.findOne().name)
There is other ways to implement such undefined checks of course.
You also seem to be using Firefox.
Meteor spews out hideous stack traces with no error reasons on some browsers.
On Chrome, this is what such an error looks like with my example :
Exception in template helper: TypeError: Cannot read property 'name' of undefined
at (... stacktrace ...)
So when you see giant unintelligible String-joined stacktraces, check if you can have more useful information on another browser.
I have built a complete demo of this behaviour on MeteorPad.