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

[neil-r-b]

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.

[myselfsrjn4u]

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