Protractor not finding the same element after a promise - javascript

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

Related

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)
})

Cypress unable to find form element on webpage

I'm currently trying to do some very basic tests in regards to the input fields at https://whitelabel.sandbox.array.io/signup?platform=v3 but having trouble in Cypress in finding the form elements. The code I have is as follows:
describe('Verify identity data', () => {
it('Makes an assertion', function () {
cy.visit('https://whitelabel.sandbox.array.io/signup?platform=v3');
cy.get('input[name=firstName]');
});
});
However Cypress is giving me the error:
Timed out retrying after 4000ms: Expected to find element: input[name=firstName], but never found it.
Am I using the incorrect selector here? Any advice would be appreciated!
It is because you are using a shadow DOM
to access use .shadow https://docs.cypress.io/api/commands/shadow
describe("Verify identity data", () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get("array-account-enroll").shadow().find('input[name="firstName"]');
});
});
There's a shadow root in the DOM, but it's pretty high up in the DOM and likely to affect a lot of your commands.
Add a config setting to the test or to cypress.confi.js and you won't have to worry about appending every command.
describe("Verify identity data", {includeShadowDom: true}, () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get('input[name="firstName"]');
cy.get('input[name="lastName"]');
});
})

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()

Is there any way to hide a log in cypress?

I'd like to know if there's a way to not show a log in Cypress, for example.
If I make a test to log into any application, when it types the password:
cy.get(#id).type(password)
and the test is executed, the password value appears in the log.
Is there any way of stopping this?
as per docs, this should work:
cy.get("#id").type( password, { log: false });
If you want to hide the command log sidebar altogether then set the ENV CYPRESS_NO_COMMAND_LOG to 1 before running Cypress this way:
CYPRESS_NO_COMMAND_LOG=1 cypress run
Documentation
It works for the Cypress v10.9.0
With some older versions (8.7.0, 9.6.0) it may not work.
CYPRESS_NO_COMMAND_LOG=1 leaves faulty empty space
fix: respect CYPRESS_NO_COMMAND_LOG in env
We can hide the details of each step inside cy.getIframeBody code by disabling internal commands' logging.
Cypress.Commands.add('getIframeBody', () => {
// get the iframe > document > body
// and retry until the body element is not empty
cy.log('getIframeBody')
return cy
.get('iframe[data-cy="the-frame"]', { log: false })
.its('0.contentDocument.body', { log: false }).should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then((body) => cy.wrap(body, { log: false }))
})

getting the value of a pseudo-element with protractor

I'd like to verify the text content of a pseudo-element. The promise returned from using ptor.executeScript("window.getComputedStyle(jQuery('.my-class')[0], ':after').content").then(function(data){
console.log(arguments) // {'0':null}
});
I've also tried dropping that in the expectation, but I'd guess that fails for the same reason.
Since the CSS Declaration for this is pointing at one of the element's attributes anyway, should I just try to read that attribute?
executeScript will waits for you to return a value - so you'll need to do:
ptor.executeScript("return window.getComputedStyle(jQuery('.my-class')[0], ':after').content")
.then(function(data){ console.log(arguments)});
As an updated answer based up the one from our good friend Julie aka "Protractor Wizard."
I didn't have jQuery available to get my pseduo-element so I did this...
describe('#swPopover Component', () => {
it('should show the popover message when hovered', () => {
browser.actions().mouseMove(objectsPage.popover).perform();
browser.executeScript('return window.getComputedStyle(document.querySelector(".sw-popover"), ":after").content')
.then(data => expect(data).toBe('"I am the popover text"'));
});
});

Categories