Protractor中区分已点赞与未点赞图标及带空格类名定位问题

嘿，我太懂你遇到的这个麻烦了！点赞图标两种状态的类名带空格，换成点还是定位不到？其实这里的核心坑是：HTML里class属性的空格不是类名的一部分，是用来分隔多个独立类的，很多人都会在这里栽跟头。我给你几个靠谱的解决方案：

1. 正确构造CSS选择器（最推荐） #

你之前可能错误地用了空格（比如.like icon.liked），这会让Protractor去寻找.like元素下的icon.liked子元素，而不是同时拥有这两个类的目标图标。正确的写法是把多个类用点直接连接，绝对不能加空格！

举个实际例子：

• 未点赞图标class是"icon like-btn" → CSS选择器写.icon.like-btn
• 已点赞图标class是"icon liked-btn" → CSS选择器写.icon.liked-btn

对应的Protractor代码可以这么写：

// 先定位已点赞状态的图标
const likedIcon = element(by.css('.icon.liked-btn'));

likedIcon.isDisplayed().then((isAlreadyLiked) => {
  if (!isAlreadyLiked) {
    // 没点赞就点击未点赞状态的图标
    element(by.css('.icon.like-btn')).click();
  } else {
    console.log('这个图标已经被点赞过啦');
  }
});

这里用isDisplayed()比isPresent()更准确，因为它会判断元素是否可见，避免DOM里存在但隐藏的元素干扰判断。

2. 用XPath灵活定位 #

如果CSS选择器还是不好使，XPath是个万能备选方案。你可以通过判断class属性是否包含目标类名来精准定位：

// 已点赞图标：同时包含icon和liked-btn两个类
const likedIcon = element(by.xpath("//*[contains(@class, 'icon') and contains(@class, 'liked-btn')]"));
// 未点赞图标
const unlikedIcon = element(by.xpath("//*[contains(@class, 'icon') and contains(@class, 'like-btn')]"));

likedIcon.isPresent().then((isLiked) => {
  if (!isLiked) {
    unlikedIcon.click();
  }
});

这种写法不用纠结类名的顺序，只要元素的class里包含这两个类就能匹配到，灵活性拉满。

3. 获取class属性直接判断 #

还有一种更直观的思路：先定位到图标元素，再获取它的class属性，直接判断是否包含已点赞的类名：

const likeIcon = element(by.className('icon')); // 先通过单个类定位图标

likeIcon.getAttribute('class').then((classNames) => {
  if (classNames.includes('liked-btn')) {
    console.log('已经点过赞了，不用再点啦');
  } else {
    likeIcon.click();
  }
});

这种方法适合类名结构比较固定的场景，逻辑清晰好维护。

你可以根据你的HTML结构选其中一种试试，大概率是CSS选择器的空格用错了导致的问题，先检查这个哦！

内容的提问来源于stack exchange，提问作者APSK_0989