[RFC] Deprecation of shadow$ and shadow$$ after introducing deep selector

[christian-bromann]

Hey y'all 👋

With v7.5.0 we have introduced a deep selector. As far as I can see it should cover the same functionality as the shadow$ and shadow$$ commands. To keep our set of commands reasonable I would love to get rid of these custom query commands in favor of the deep selector. I feel confident that we can implement a codemod that would replace all occurrences with a proper deep selector.

What do you all think?

cc @jrobinson01 @pandasm @lacell75 and @webdriverio/technical-steering-committee and everyone else 😉

[wswebcreation]

As long as we make the migration as easy as possible 😄 I would say go for it

[lacell75]

I'm agree with @wswebcreation , I need a migration as easy as possible because I have 2000 items of shadow$ in my code.

[wswebcreation]

@lacell75

Can you provide some examples that you have, especially from pieces of code that were difficult to get the element? That would definitely help with the codemod script

[lacell75]

I use component/page objects. see below a code snippets. I hope that help you.

dtappPage.js (page object):

import dtUsertoolbar from '../../components/desktop/usertoolbar';
import dtMenu from '../../components/desktop/menu';

export default class dtapp {
  get desktop() {
    return browser.$('frontend-app');
  }

  get app() {
    return this.desktop.shadow$('dt-app');
  }

  // logo
  get logo() {
    return this.app.shadow$('dt-logo-toolbar');
  }

  // logo edisys
  get edlogo() {
    return this.app.shadow$('ed-logo-toolbar');
  }

  // logo
  get logoBtn() {
    return this.logo.shadow$('a');
  }

  // user toolbar
  get usertoolbar() {
    this.app.shadow$('dt-user-toolbar').waitForExist();
    return new dtUsertoolbar(this.app.shadow$('dt-user-toolbar'));
  }

  // Error popup
  get popup() {
    return this.app.shadow$('paper-toast');
  }

usertoolbar.js (component object):

import Component from '../component';
import dtSettingsMenu from './settingsMenu';
import DtAvatar from '../common/dt-avatar';
import Notification from '../common/notification';

export default class DtUsertoolbar extends Component {
  get dtAvatar() {
    return new DtAvatar(this.host);
  }

  // Menu settings
  get settingsbuttonmenu() {
    return new dtSettingsMenu(this.host.shadow$('dt-settings-button-menu'));
  }

  // Button notification
  get notifsButton() {
    return this.host.shadow$('dt-notifications-button-menu');
  }

  // Help button
  get helpButton() {
    return this.host.shadow$('#aideEnLigne');
  }

  // Chat button
  get chatComponent() {
    return this.host.shadow$('dt-snap-engage');
  }

  // Chat button
  get chatButton() {
    return this.chatComponent.shadow$('#chatBtnDisabled');
  }

  // notification menu
  get paperBadge() {
    return this.notifsButton.shadow$('paper-badge');
  }

  get badge() {
    return this.paperBadge.shadow$('#badge-text');
  }

  // notification menu
  get notifsMenu() {
    return this.notifsButton.shadow$('dt-notifications');
  }

  // notification assign card
  get notifsAssignCard() {
    return this.notifsMenu.shadow$('dt-contract-assign-notification-card');
  }

  // all notifications assign card
  get allNotifsAssignCard() {
    return this.notifsMenu.shadow$$('dt-contract-assign-notification-card');
  }

  // notification assign Comp
  get notifsAssignCardComp() {
    this.notifsAssignCard.waitForExist();
    return new Notification(this.notifsAssignCard);
  }

  // notification assign profile card
  get notifsAssignProfileCard() {
    return this.notifsMenu.shadow$('dt-search-profile-assign-notification-card');
  }

  notifAssignProfileCard(nb) {
    this.notifsAssignProfileCard.waitForExist();
    return new Notification(this.notifsMenu.shadow$(`dt-search-profile-assign-notification-card:nth-of-type(${nb})`));
  }

  // all notifications assign profile card
  get allNotifsAssignProfileCard() {
    return this.notifsMenu.shadow$$('dt-search-profile-assign-notification-card');
  }

  // notification assign Comp
  get notifsAssignProfileCardComp() {
    this.notifsAssignProfileCard.waitForExist();
    return new Notification(this.notifsAssignProfileCard);
  }

  // notification export card
  get notifsExportCard() {
    return this.notifsMenu.shadow$('dt-contract-export-notification-card');
  }

  // all notification export card
  get allNotifsExportCard() {
    return this.notifsMenu.shadow$$('dt-contract-export-notification-card');
  }

  // notification assign Comp
  get notifsExportCardComp() {
    this.notifsExportCard.waitForExist();
    return new Notification(this.notifsExportCard);
  }

  // notifications list
  get notifsList() {
    this.notifsMenu.waitForExist();
    return this.notifsMenu.shadow$('.flex.wrapper.layout.vertical');
  }

  get deleteAllNotificationBtn() {
    return this.notifsMenu.shadow$('#clearNotifBtn');
  }

  exit() {
    // Open settings menu
    this.dtAvatar.circleletter.waitAndClick();
    this.settingsbuttonmenu.exit();
  }

  avatar() {
    this.dtAvatar.circleletter.waitAndClick();
  }

  openMyAccount() {
    this.settingsbuttonmenu.openMyAccount();
  }

  openHelp() {
    this.helpButton.waitAndClick();
  }

  openChat() {
    this.chatButton.waitAndClick();
  }

  openMyOrganization() {
    this.settingsbuttonmenu.openMyOrganization();
  }

  deleteAllNotif() {
    this.openMyNotificationsMenu();
    this.deleteAllNotificationBtn.waitAndClick();
  }

  get IDExport() {
    return this.notifsExportCardComp.IDExport;
  }


  get exportSubjectObject() {
    return {
      subject: this.notifsExportCardComp.notificationSubject.getHTML(),
      object: this.notifsExportCardComp.notificationObject.getHTML(),
    };
  }

  get assignSubjectObject() {
    return {
      subject: this.notifsAssignCardComp.notificationSubject.getText(),
      object: this.notifsAssignCardComp.notificationObject.getText(),
    };
  }

  openMyNotificationsMenu() {
    if (!this.notifsMenu.isDisplayed()) this.notifsButton.waitAndClick();
  }
}

[wswebcreation]

Thanks, this is definitely helpful

[jrobinson01]

I'm in agreement. Interested in seeing what the migration looks like in regards to component/page objects. Actually, changing my mind here. I think there might still be value in having both the shadow$ and deep methods.

[lacell75]

Sounds OK to me, but currently the deep selector like that return this.desktop.$('>>> dt-logo-toolbar'); doesn't work.
It found the first dt-logo-toolbar element in the page and not the dt-logo-toolbar in dt-app . Need to open a bug?

[tzurp]

Sounds OK to me, but currently the deep selector like that return this.desktop.$('>>> dt-logo-toolbar'); doesn't work.
It found the first dt-logo-toolbar element in the page and not the dt-logo-toolbar in dt-app . Need to open a bug?

I played a bit with Deep Selectors and it seems to work as if the Browser context is used, even when used with an Element context. e.g. container.$(>>>...) works like $(>>>...) no matter what the node container is. @christian-bromann, is it a known issue?

[christian-bromann]

@christian-bromann no, mind creating an issue for it?

[tzurp]

On it

[tzurp]

I opened an issue: #6796