We Keep Coding

Cypress - element is detached from the DOM error

I tested our (nearly all of the components are created by DevExtreme) web application but I have a strange re-rendering problem.
I posted a picture of the error message. As you can see the "element exists" and "element is visible" assertions both pass. The next action command click, type, clear sometimes gives me this error.
I watched the network but there are no suspicious API requests.
How can I fix it?
cy.get("div.c-title.pe-2.me-2.active")
.parent()
.find("[name='Property Unsafe']")
.parent()
.find(".dx-item-content")
.contains("Yes")
.scrollIntoView()
.should("be.visible")
.should("be.exist")
.click();
You can see which components are I working on it. (I get similar errors frequently from every components not just dropdown or text input)
Hello, the issue is still the same. Not working.
As you can see the latest updates here: I used Cypress.dom.isAttached($el) I re-queried until the element was attached into dom with Cypress recurse library. Still the result same.
recurse(
() =>
cy.get(
"#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
),
($el) => Cypress.dom.isAttached($el),
{
debugLog: true,
log: true,
limit: 50, // max number of iterations
timeout: 10000, // time limit in ms
delay: 250, // delay before next iteration, ms
}
).then(() => {
cy.get(
"#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
).then(($el) => {
if (Cypress.dom.isAttached($el)) {
cy.log("aattacchheeed");
cy.wrap($el)
.clear({ force: true })
.type(variables.meterId, { force: true });
} else {
cy.log("NOOOOOOTTTTTTTTTT aattacchheeed");
}
});
});

The Cypress log is saying you have a .click() two lines above the scrollIntoView(), but it is not in the posted test code.
You should split the long command after that first click, it is most likely causing the re-render.
Whatever you selected above click #1 should be selected again after it.
I can't tell what the context is, only a mention of DevExtreme. If you provide more information about the control (select, input, dropdown) it would be more useful.
Also the correct check for attachment is isAttached() not visible or exist.
.then(($el) => {
expect(Cypress.dom.isAttached($el).to.eq(true)
})

Deep equal comparing not working on Cypress 9.7.0

I've updated my cypress to 9.7.0 version and right now I have a problem with deep equal. When I wrote test line of code:
expect([1,2,3]).to.deep.equal([1,2,3]);
Everything works correctly.
While I'm testing redux store I got an error which is looks
Timed out retrying after 4000ms: expected [ Array(2) ] to deeply equal [ Array(2) ]
Arrays in devtool console preview are the same... I've tried in two ways to write test. I also combined it with async and timeouts
First try:
it('Example redux check', () => {
cy.fixture('file.json').then((fixtures) => {
cy.window()
.its('store')
.invoke('getState')
.its('queue.queueItems').should('deep.equal', fixtures.store.queue.queueItems);
});
});
Second try
it('Example redux check', () => {
cy.fixture('file.json').then((fixtures) => {
const getQueueItems = (win) => {
return win.store.getState().queue.queueItems;
}
cy.window()
.pipe(getQueueItems)
.should('deep.equal', fixtures.store.queue.queueItems);
});
});
Had anyone similar issue or idea how to avoid that timeout? Exactly the same is happening while comparing async payloads...

I couldn't fault the deep.equal assertion in Cypress v9.7.0, even deeply nested arrays and objects - except when the order differed.
If your problem is difference in array order, try adding package deepEqualInAnyOrder
const deepEqualInAnyOrder = require('deep-equal-in-any-order');
chai.use(deepEqualInAnyOrder);
it('matches when ordering is different', () => {
const expected = [{a:{x:1}}, {b:2},{c:3}];
expect([{a:{x:1}}, {b:2}, {c:3}]).to.deep.equal(expected) // passes
expect([{b:2}, {a:{x:1}}, {c:3}]).to.deep.equal(expected) // fails
expect([{b:2}, {a:{x:1}}, {c:3}]).to.deep.equalInAnyOrder(expected) // passes
});

I also wanted to see if deep.equal on the <h1> element of http://example.com would succeed.
Here is my minimal, reproducible example.
// Cypress 9.7.0
it('passes deep-equal of two DOM objects', () => {
cy.visit('http://example.com')
cy.get('h1').then($el1 => { // get h1 1st time
cy.get('h1').then($el2 => { // get another copy
// Are they different objects?
expect($el1).to.not.equal($el2) // pass
expect($el1 === $el2).to.equal(false) // pass
// Do they deep-equal
expect($el1).to.deep.equal($el2) // pass
})
})
})

Nearly all frontends I use have Cypress including some open source ones.
It is related to a few issues opened on GitHub and affects latest versions of Cypress.
https://github.com/cypress-io/cypress/issues/21353
https://github.com/cypress-io/cypress/issues/21469
This is what I get on a WIP after upgrading some tests that use deep.equal:
Your first example looks more standard.
I recommend downgrading to a lower version. The following version worked for me before upgrade:
9.5.4

Unable to select item in cypress inside a frame

I have managed to log into a laboratory results system but I can't progress any further. My long term intention is to grab lab results for local incorporation into a medical record.
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('frame[id="EclairMainFrame"]')
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
describe('Medlab Test', () => {
it('Visits Eclair', () => {
cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
cy.get('.login-field').eq(0).type('userid')
cy.get('.login-field').eq(1).type('passphrase{enter}')
cy.location('pathname').should('eq', '/Eclair/ClinicalWorkstation.aspx')
getIframeBody().find('.search-form-form-textbox')
})
})
This gets me logged in, but Cypress fails to find the input field to enter the Patient ID. I see the following error message:
Timed out retrying after 6000ms: Expected to find element:
.search-form-form-textbox, but never found it. Queried from element: <body>
The DOM at this point for that input field shows:
<input class="search-form-form-textbox Mandatory" id="PatAliasId" name="PatAliasId" type="text" value="" tabindex="4">
I've tried cy.get on the class cy.get('.search-form-form-textbox'), on the id cy.get('#PatAliasId'), and on class attribute cy.get('name=["PatAliasId"]') but all these attempts time out at 6 seconds.
What's the correct syntax for finding a dom element inside a frame?

To work with frames in Cypress you have to install a cypress plugin with the following command, then you can interact with elements inside the frame
npm install -D cypress-iframe
Reference URL
Cypress Frames
If you have done the above already, then load the frame first to find the required element
cy.frameLoaded(#frameId)
cy.iframe.find('#PatAliasId').type('abc')

In previous version of cypress, don't have any support for the iFrame. But in latest version cypress provided the support for iFrames.
Do work on cypress , we need to install cypress-iframe by using the below commands.
npm install -D cypress-iframe
Use this below code:
describe('Medlab Test', () => {
it('Visits Eclair', () => {
cy.visit('https://cdr.medlabcentral.co.nz/Eclair/mvc')
cy.frameLoaded('#frameId')
cy.iframe.find('#PatAliasId').type('Enter Your Input')
})
})

unable to access html element using cypress

I am trying to test the login functionalities using cypress, but for some reason I am unable to access the input text-box.
It shows Timed out retrying after 4000ms: Expected to find element: runner container, but never found it.
describe("User authentication", () => {
beforeEach(() => {
cy.visit("https://lmflf.com");
});
it("it takes to the correct page", () => {
cy.get('[data-field=password]')
});
});

I could see a shadow DOM in your webpage and in that case you have to use .shadow()(Cypress Docs). Your code would look something like:
cy.get('view-login').shadow().find('input[data-field="username"]').type('username', {force: true})
cy.get('view-login').shadow().find('input[data-field="password"]').type('password', {force: true})
cy.get('view-login').shadow().find('input[value="personal"]').click()
cy.get('view-login').shadow().find('.ViewLogin__button').click()

Protractor not finding the same element after a promise

I'm trying to obtain the text from a element in protractor, and after doing something with the text, i want to click on the same element. This is what i have
HTML:
<span class="span-user" id="spanuser"> {{user?.login}}</span>
Protractor test:
describe('Login OK with correct pass', () => {
it('should login successfully with admin account', () => {
// logging
username.clear();
username.sendKeys('admin');
password.clear();
password.sendKeys('admin');
element(by.css('button[type=submit]')).click();
// check if the username <span> has the current login username
const expect2 = /admin/;
const spanuser = element(by.css('span#spanuser'));
spanuser.getText().then((value) => {
console.log('inside');
console.log(value ? value : 'no value');
expect(value).toMatch(expect2);
});
// then i try to click on the same span, to do some stuff
spanuser.click().then(() => {
console.log('It has been pressed!');
});
});
});
The first part works just fine, it gets the test and it passes the expect, but when i try to do the click() function on the span, i get the following error:
Failed: Timed out waiting for asynchronous Angular tasks to finish after 5 seconds. This may be because the current page is not an Angular application. Please see the FAQ for moredetails: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector,
span#spanuser)
What have i tried:
browser.waitForAngular() before spanuser.click()
browser.wait(10000) before spanuser.click()
also i have a waitForAngular() in the beforeAll function.
Does anyone has a idea on this? It doesn't really make any sense to me, why wouldn't find the same element that has already found before?
Thanks a lot!

add browser.waitForAngularEnabled('false') in onPrepare of protractor conf.js
onPrepare: function() {
browser.waitForAngularEnabled('false')
// if you set this in onPrepare(), it will be a global setting, will
// effect all script, so you no need to set it in other place.
}

use the jasmin defaulttimeoutinterval in config instead of manual sleep
jasmineNodeOpts: {
defaultTimeoutInterval: 250000
},
allScriptsTimeout: 180000