量角器，如何使用父亲的类名获取图像元素

Question

我需要检查 html 页面中的所有卡片容器，以及是否存在相关图像。我在这个页面中有很多图片标签，所以我无法仅通过标签名称获取元素。

这是我的 html:

<div class="card-container">
  <div class="images">
      <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="card-image" title="Vet side" data-linktext="Vet's Side:1:" data-contentname="" data-contenttype="image" data-componentname="VetImage" data-is-click-tracking-enabled="true">
        <div class="image-loader" style="height: 258px; display: inline;">
          <picture>
            <source srcset="/path/for/an/image.jpg.image.740.555.high.jpg 1x,/path/for/an/image.jpg.image.1480.1110.high.jpg 2x" media="(min-width: 1025px)">
            <source srcset="/path/for/an/image.jpg.image.1024.768.medium.jpg 1x,/path/for/an/image.jpg.image.2048.1536.medium.jpg 2x" media="(min-width: 768px)">
            <source srcset="/path/for/an/image.jpg.image.375.281.low.jpg 1x,/path/for/an/image.jpg.image.750.563.low.jpg 2x" media="(min-width: 0px)">
            <img src="/path/for/an/image.jpg.image.750.563.low.jpg" class="" alt="">
          </picture>
        </div>
      </a>
  </div>

我的stepdefinition.js:

let card_container = element.all(by.css('.card-container'));
      card_container.count().then(function(value){
            let cards_count = value;
            console.log('cards count is: ', cards_count);
      })
      next();

如我的步骤定义所示，我可以获得卡的数量。目前，我有 4 个卡片盒，里面有相同的结构和相同的标签。我必须检查如果我有一个卡片容器，我也有一个相关的图像。有人可以帮助我吗？

谢谢

Answer 1

您可以在特定卡片的定位器中链接图像元素的定位器。我这里的示例检查卡片是否有图像，但您可以将其调整为容器。

describe('illustrates finding images within cards', function() {
it('finds all cards and checks for images', function() {
    browser.waitForAngularEnabled(false);
    browser.ignoreSynchronization = true;
    browser.get('https://materializecss.com/cards.html');
    element.all(by.css('.card-container')).each(function(card, index) {
        card.element(by.tagName('img')).isPresent().then(function(present) {
            if(!present) {
                console.log('The '+index +'th card not display image');
            } 

            expect(present).toEqual(true); // use jasmine assertion api
        });
    })
}, 2 * 60 * 1000); //should always come up within 2 minutes
}); //end of describe

因为我测试的页面不是 angular，所以我相应地进行了设置。 .each 对所有人找到的每个元素做同样的事情。链接对 myElement 的调用不起作用，所以我通过索引重新获取并检查 isPresent() 以避免在找不到图像时出现错误（如果找到图像，它也会让我知道）。我假设每张卡片只有一张图片。如果没有，您可能需要放入 .first() 以避免出现有关数量和量角器使用第一个的消息。

量角器，如何使用父亲的类名获取图像元素

Protractor, how to get an image element using the classname of the father

html

javascript

tags

children

protractor