建立具有多个模式的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

听起来您正在尝试进行字符串连接-制作一个可以用作CSS选择器的字符串。

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

Answer 2

如果使用赛普拉斯（not Selenium）进行测试，则可以创建自定义命令

不清楚您是否想要回来，是全部还是第一？

全部

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");
  }

  return cy.wrap(foundElements);
});

// Usage
cy.getAll([
  'IamClassOne-varaible1', 
  'SomethingRandom-variable2', 
  'ThisisRandomAgain-variable1'
]);

第一

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");
  }

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

// Usage
cy.getFirst([
  'IamClassOne-varaible1', 
  'SomethingRandom-variable2', 
  'ThisisRandomAgain-variable1'
]);