cypress: Cypress not able to locate element using cy.get

Current behavior

In the below DOM we are trying to locate the heading using data-test-id but for some reason, it is not able to locate in the runtime but when search with the same selector is suggested selector it is able to uniquely identify. I am using cypress for other #tests where modal is used and I did not find this issue there but in this specific case it’s failing.

Desired behavior

Test code to reproduce

it.only(`Verify user is able to use welcome new member template`, () => {
		cy.getDataTestId(`template-link-post-composer`)
			.should(`be.visible`)
			.should(`contain.text`, `Use a template`)
			.click();
		cy.getDataTestId(`heading-template-pop-up`).should(`be.visible`).should(`contain.text`, `Use a template`);
		cy.getDataTestId(`button-close-template-pop-up`).should(`be.visible`).click();
		cy.getDataTestId(`template-link-post-composer`)
			.should(`be.visible`)
			.should(`contain.text`, `Use a template`)
			.click();
		cy.getDataTestId(`template-welcome-new-members`)
			.should(`be.visible`)
			.within(() => {
				cy.getDataTestId(`heading-template-type`)
					.should(`contain.text`, `Welcome New Members (weekly)`)
					.should(`be.visible`);
				cy.getDataTestId(`description-template`)
					.should(`contain.text`, `Copy this post and use this weekly to welcome the new members of your group`)
					.should(`be.visible`);
				cy.getDataTestId(`button-view-template`).should(`be.visible`).should(`contain.text`, `View`).click();
				cy.getDataTestId(`view-template-pop`).should(`be.visible`);
				cy.get('[data-test-id="view-template-heading"]').should(`be.visible`);
				cy.getDataTestId(`view-template-heading`).should(`be.visible`).should(`contain.text`, `View template`);
				cy.getDataTestId(`template-name-view-pop-up`)
					.should(`be.visible`)
					.should(`contain.text`, `Welcome New Members (weekly)`);
			});
	});

Versions

Cypress version - 6.2.1

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

For others who stumble across this issue, as I was suffering from the same exact problem. The suggestion to use withinSubject:null from @myselfsrjn4u does work although to add more color from the docs this does:

Element to search for children in. If null, search begins from root-level DOM element

Which clued us in to the mistake we were doing in code - it is due to checking for the existence of the modal in a within() block. This has cypress searching the DOM from that point but the modal is outside of it. So an alternative to using withinSubject:null is to check for existence outside of the within() block.

+46

neil-r-b on Jun 22, 2021

I’ve seen a lot of things in my day that has caused my hair’s to turn grey but not was more shocking then to see such an information phishing device known as chrome bring used for code testing… Try brave browser good sir and maybe then you can keep praying eyes out of the sandbox… By the way … if you actually go back to your sandbox you might find the source of your problem there …

If you need any directions get lost or get stuck in the sand give me a holler

On Sat, Jan 23, 2021, 4:11 AM Ppkd2021 notifications@github.com wrote:

No, it appears on the screen while the timeout is happening but still it is not able to locate. I tried using pause and hardcoded wait but no luck. [image: image] https://user-images.githubusercontent.com/59794856/105574211-0de5d180-5d89-11eb-89a6-14ccafe3d821.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cypress-io/cypress/issues/14566#issuecomment-765893231, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJVANN6AQPEGYKFVHZ4T33S3KHF5ANCNFSM4WCSFRYA .

+46

arthurlewisbrown on Jan 23, 2021

@Ppkd2021 Can you try with this —> cy.get(‘[data-test-id=“view-templete-heading”]’,{withinSubject:null})

+35

myselfsrjn4u on Jan 26, 2021