How to use selector - 10 common examples

run = async () => {
    const { project, environment } = this.props,
          // options from Report modal like interactiveMode, updateSnapshot
          options = this.props.options || {};
    this.props.action.saveSuite();
    this.props.action.resetCommandFailures();
    try {
      // contains file:line:col from error report
      this.reportedFailures = [];
      this.runtimeTemp = getRuntimeTestPath();
      this.setState({ loading: true });
      const activeEnv = getActiveEnvironment( project.environments, environment ),
            specList = await exportProject(
              this.props.projectDirectory,
              this.runtimeTemp,
              this.props.checkedList,
              {
                headless: ( options.interactiveMode ? false : this.props.headless ),
                launcherArgs: this.props.launcherArgs,
                ...options
              },
              this.props.snippets,
              project.targets,
              {
                variables: getSelectedVariables( project.variables, activeEnv ),
                environment
              }
            ),

$.each(allSelectors, function (module, selectors) {

                // only add the default "All X Modules" selector
                if (selectors === true) {
                    selectors = [];
                }

                // use id as initial moduleName
                var moduleName = module;

                // customize module name
                if (module === 'other') {
                    moduleName = i18n['selector.other'];
                } else {
                    // fetch module name, if module is an moduleId
                    var moduleInfo = CMS.getModule(module);
                    if (moduleInfo) {
                        moduleName = moduleInfo.name;
                    }

                    // add All  Modules selector
                    var allXModulesTitle = JSON.parse(JSON.stringify(i18n['selector.allXModules'])) || ['{moduleName}'];
                    Object.keys(allXModulesTitle).forEach(function (key) {
                        allXModulesTitle[key] = allXModulesTitle[key].replace('{moduleName}', moduleName);
                    });

                    var allXModulesSelector = '.' + module; // TODO: legacy modules added &.moduleId
                    selectors.unshift({title: allXModulesTitle, selector: allXModulesSelector});
                }

this.interactive = {
      sids: [],
      targets: {}
    };
    this.schema = schema;
    this.suite = { ...suite };
    this.projectDirectory = projectDirectory;
    this.outputDirectory = outputDirectory;
    this.snippets = { targets: {}, groups: {}, ...snippets };
    this.env = env;
    this.options = options;
    this.runner = runner; // RUNNER_PUPPETRY when embedded

    this.allTargets = Object.values({ ...sharedTargets, ...snippets.targets, ...targets });
    // resolve css prop
    this.normalizedTargets = mapSelectors( getActiveTargets( this.allTargets ) )
      //.filter( entry => !entry.ref )
      .reduce( ( carry, entry ) => {
        carry[ entry.target ] = entry;
        return carry;
      }, {});

    this.targets = this.allTargets.reduce( ( carry, entry ) => {
      carry[ entry.target ] = entry.selector;
      return carry;
    }, {});

  }

mapStateToProps = ( state ) => ({
        snippets: state.snippets,
        cleanSnippets: selectors.getCleanSnippetsMemoized( state )
      }),
      // Mapping actions to the props

mapStateToProps = ( state ) => ({
        store: state,
        cleanSnippets: selectors.getCleanSnippetsMemoized( state )
      }),
      // Mapping actions to the props

const mapStateToProps = ( state ) => ({
        panes: state.project.appPanels.suite.panes,
        expandedGroups: state.project.groups,
        groups: state.suite.groups,
        targets: state.suite.targets,
        targetDataTable: selectors.getSuiteTargetDataTableMemoized( state )
      }),
      // Mapping actions to the props

const mapStateToProps = ( state ) => ({
        panes: state.project.appPanels.suite.panes,
        expandedGroups: state.project.groups,
        groups: state.suite.groups,
        targets: state.suite.targets,
        title: state.suite.title,
        description: state.suite.description,
        timeout: state.suite.timeout,
        targetDataTable: selectors.getSuiteTargetDataTableMemoized( state ),
        groupDataTable: selectors.getSuiteGroupsMemoized( state )
      }),
      // Mapping actions to the props

var getGlobalCssSelectors = function () {
        var globalSel =  {};

        globalSel.other = [{
            title: i18n['selector.allChildModules'],
            selector: ' .isModule'
        }, {
            title: i18n['selector.allFirstLevelChildModules'],
            // includes selector for modules with wrappers, e.g. rz_box and rz_grid
            selector: ' > .isModule, > :not(.isModule) > .isModule, > :not(.isModule) > :not(.isModule) > .isModule'
        }, {
            title: i18n['selector.headlines'],
            selector: ' h1, h2, h3, h4, h5, h6',
            items: [{
                title: i18n['selector.headline1'],
                selector: ' h1'
            },{
                title: i18n['selector.headline2'],
                selector: ' h2'
            },{
                title: i18n['selector.headline3'],

var getGlobalCssSelectors = function () {
        var globalSel =  {};

        globalSel.other = [{
            title: i18n['selector.allChildModules'],
            selector: ' .isModule'
        }, {
            title: i18n['selector.allFirstLevelChildModules'],
            // includes selector for modules with wrappers, e.g. rz_box and rz_grid
            selector: ' > .isModule, > :not(.isModule) > .isModule, > :not(.isModule) > :not(.isModule) > .isModule'
        }, {
            title: i18n['selector.headlines'],
            selector: ' h1, h2, h3, h4, h5, h6',
            items: [{
                title: i18n['selector.headline1'],
                selector: ' h1'
            },{
                title: i18n['selector.headline2'],
                selector: ' h2'
            },{
                title: i18n['selector.headline3'],
                selector: ' h3'
            },{
                title: i18n['selector.headline4'],

// use id as initial moduleName
                var moduleName = module;

                // customize module name
                if (module === 'other') {
                    moduleName = i18n['selector.other'];
                } else {
                    // fetch module name, if module is an moduleId
                    var moduleInfo = CMS.getModule(module);
                    if (moduleInfo) {
                        moduleName = moduleInfo.name;
                    }

                    // add All  Modules selector
                    var allXModulesTitle = JSON.parse(JSON.stringify(i18n['selector.allXModules'])) || ['{moduleName}'];
                    Object.keys(allXModulesTitle).forEach(function (key) {
                        allXModulesTitle[key] = allXModulesTitle[key].replace('{moduleName}', moduleName);
                    });

                    var allXModulesSelector = '.' + module; // TODO: legacy modules added &.moduleId
                    selectors.unshift({title: allXModulesTitle, selector: allXModulesSelector});
                }

                // add to list
                allModules.push([module, moduleName]);

                // save selector by module and selector config by selector
                selectorByModule[module] = [];
                selectorConfigByModule[module] = {};

                var addSelectors = function thisFn(module, moduleSelectors, hierarchy) {