Not able to click on a link with deepquery

[alpriya87]

Hi Georgegiff,

Here is the jspath and i'm trying to click on the link so that i can navigate to a different page :

document.querySelector("body > portal-web").shadowRoot.querySelector("#sink > details-web").shadowRoot.querySelector("div > app-component-search-page > div > ink-container > ink-card > div:nth-child(2) > div > mat-table > mat-row > mat-cell.ods-text__body--small.component-width-cname.mat-cell.cdk-column-Component-Name.mat-column-Component-Name.ng-star-inserted > a")

If i do the deepqueryselector on the above like this
await this.page.addScriptTag({
path: path.join(__dirname, '../../node_modules/query-selector-shadow-dom/dist/querySelectorShadowDom.js')
});

    try {
        const complink = (await this.page.waitForFunction(() => {
            const complink = querySelectorShadowDom.querySelectorDeep("#sink > mf-details-web")
            return complink;
        })).asElement();
        await complink.click();
        console.log("clicking on the link is success")
    }catch(e) {
        throw new Error("clicking on the link is not success")
    }

OR like this

   await this.page.addScriptTag({
        path: path.join(__dirname, '../../node_modules/query-selector-shadow-dom/dist/querySelectorShadowDom.js')
    });

    try {
        const complink = (await this.page.waitForFunction(() => {
            const complink = querySelectorShadowDom.querySelectorDeep(".div > app-component-search-page > div > ink-container > ink-card > div:nth-child(2) > div > mat-table > mat-row > mat-cell.ods-text__body--small.component-width-cname.mat-cell.cdk-column-Component-Name.mat-column-Component-Name.ng-star-inserted > a")
            return complink;
        })).asElement();
        await complink.click();
        console.log("clicking on the link is success")
    }catch(e) {
        throw new Error("clicking on the link is not success")
    }

doesn't work either ways. What are my options in this case?

[Georgegriff]

Hi thanks for the issue this might be a little tricky for me to debug, that jspath is quite complicated.

I would try to see if there is selectors that do not make use of > to see if there is an issue there.
try to make the simplest selector you can to your link. This is good for maintenance as well, do you really want your selector to break if any of those child components change? Probably not

When working with shadow Dom > doesn't always make sense.

Your first example is a little confusing because it doesn't seem to be for the same element as the 2nd?

[alpriya87]

Here is the jspath for this , trying to click on the link in this table, row 1 column 1:

[Georgegriff]

Can you please just try using something simple like div:nth-child(2) .ng-star-inserted a for example. Theres no need to create a selector with all of those references to parents.

Also in your prior example you had
querySelectorDeep(".div > app-component-search-page > div > ink-container > ink-card > div:nth-child(2) > div > mat-table > mat-row > mat-cell.ods-text__body--small.component-width-cname.mat-cell.cdk-column-Component-Name.mat-column-Component-Name.ng-star-inserted > a")

are you sure .div is correct? doesn't seem right to me should be div if anything .div would look for a class of div

[alpriya87]

That worked :) this is really helpful!!