построить css путь селекторов с несколькими шаблонами

Question

У меня есть несколько селекторов, как показано ниже. Есть ли способ для меня использовать несколько шаблонов для создания css пути? что-то вроде .css_selector--${IamClassOne | SomethingRandom | ThisisRandomAgain}-?

<div class="css_selector--IamClassOne-variable1">
<div class="css_selector--SomethingRandom-variable2">
<div class="css_selector--ThisisRandomAgain-variable2">

Answer 1

Если вы тестируете с Cypress ( не Selenium ), вы можете создавать собственные команды

Не ясно, хотите ли вы вернуться, ВСЕ или ПЕРВЫЙ?

Может выполнять поиск по частичному селектору классов, используя эти выражения,

• [class^="ClassBeginsWithThis"], где ^ = означает, что строка класса начинается с селектора
• [class*="ClassContainsThis"] где * = означает, что строка класса имеет селектор где-то внутри.

---

Все

Cypress.Commands.add('getAll', {previousSubject: false}, (selectorArray) => {

  const foundElements = selectorArray
    .map(selector => Cypress.$(`[class^="css_selector--${selector}"]`)
    .filter(x => x);  // remove not-found

  if (foundElements.length === 0) {
    throw new Error("No elements found");  // Fail the test, since none exist
  }

  return cy.wrap(foundElements);
});

// Usage
cy.getAll(['IamClassOne', 'SomethingRandom', 'ThisisRandomAgain']);

Первый

Cypress.Commands.add('getFirst', {previousSubject: false}, (selectorArray) => {

  const foundElements = selectorArray
    .map(selector => Cypress.$(`[class*="css_selector--${selector}"]`)
    .filter(x => x);  // remove not-found

  if (foundElements.length === 0) {
    throw new Error("No elements found");  // Fail the test, since none exist
  }

  return cy.wrap(foundElements[0]);
});

// Usage
cy.getFirst(['IamClassOne', 'SomethingRandom', 'ThisisRandomAgain']);

Answer 2

Звучит так, будто вы пытаетесь выполнить конкатенацию строк - создание строки, которую вы можете использовать в качестве селектора css.

function generateSelector (part1, part2) {
    var cssSelector = '.css_selector--' + part1 + '-' + part2;
    return cssSelector;
}
// Usage:
var selector1 = generateSelector('IamClassOne', 'variable1');
var selector2 = generateSelector('SomethingRandom', 'variable2');