Retrieve text from nested shadow elements in cypress - cypress

Question

I have nested shadow elements written like below in cypress:
cy.get('app-screen')
.shadow()
.find('app-toolbar')
.shadow()
.find('app-container .csr-content .csr-content_primary:nth-child(1) csr-multi-record')
.shadow()
.find('.stud-container .stud-rec .stud__title span')
.should('have.text', 'Viola');
The element 'span' has the text (student name - Viola).
But, I don't want to use the whole statement like this. Rather, updated the 'cypress.json' with "includeShadowDom" : true.
Now, the statement I used is:
cy.get('app-screen')
.find('.csr-content_primary:nth-child(1) .stud-container .stud-rec .stud__title span')
.should('have.text', 'Viola');
The results states the text was '' and also it states never found the element.
Again, rewrote the statement as:
cy.get('app-screen')
.find('.csr-content_primary:nth-child(1)')
.find('.stud-container .stud-rec .stud__title span')
.should('have.text', 'Viola');
This time the element was found but the result was 'Viola Marcus Helen Roy Belinda...' instead of just 'Viola'. There were more than 10 elements with class as '.csr-content_primary'.
This statement took the text for all those elements that had '.csr-content_primary' in the 1st find method.
Is that possible to get the required text from '.csr-content_primary:nth-child(1)'? And, how to write in one find method instead of two?
Could someone please help me on this?
The HTML structure looks like this:
<app-screen _ngcontent-put-c111>
#shadow-root (open)
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<div class="app-toolbar">
<app-toolbar-root class="ng-star-inserted">
#shadow-root (open)
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<div class="app-container">
<div class="top-level-bar">
<div id="csrContent">
<app-csr-content _ngcontent-put-c121>
<div class="csr-content">
<app-csr-toolbar>...</app-csr-toolbar>
<div _ngcontent-put-c121>...</div>
<div class="csr-content-main">
<div class="csr-content_primary">
<csr-multi-record _ngcontent-put-c121>
#shadow-root (open)
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<style>...</style>
<div class="stud-container">
<div class="stud_rec">
<div class="stud__title">
<img-icon class="img-icon">title</img-icon>
<span class="title-desc">Viola</span>
</div>
</div>
</div>
</csr-multi-record>
</div>
</div>
</div>
<app-crs-content>
</div>
</div>
</div>
</app-stud-container>
</div>
</app-screen>

Answer 1

Have to guess a bit without seeing the web page, but seems like you can move the :nth-child(1) to Cypress .eq(0) which should give the same effect.
cy.get('app-screen')
.find('.csr-content_primary')
.find('.stud-container .stud-rec .stud__title span')
.eq(0)
.should('have.text', 'Viola');
The shadow DOM is having an unusual effect of the Cypress search, normally the 1st and 2nd version are equivalent.
Perhaps you can also add visibility checks, in case there's delay in loading elements.
cy.get('app-screen')
.find('.csr-content_primary:nth-child(1)')
.should('be.visible')
.find('.stud-container .stud-rec .stud__title span')
.eq(0)
.should('have.text', 'Viola');