Question

对于页面上的每个图像，我都使用js在其周围创建包装锚，因此我想编写一个测试以确保它在那里。

使用夜表，我正在尝试测试以确保每个图像都有父锚。

我一直在尝试使用三种不同的方法进行测试。

测试每个父图像是否都是锚点
测试每个锚点孩子是否都是图像
收集所有图像的数组和所有锚点的数组，然后在其中比较长度

我想不出如何完成前两个方法，因此我一直在尝试第三个方法，因为这似乎最有意义，但是我在创建两个要比较的元素数组时遇到了麻烦。

我一直在尝试下面代码的变体，以尝试获得两个元素或元素ID的数组，以便我可以比较它们，但收效甚微

如果有人对如何实现这一目标有任何建议，我非常高兴。如果前两种方法更合理，也可以取消我的第三种方法。

感谢您提供的任何帮助。

这是我一直在尝试的：

html在JavaScript包装完图片后

<figure class="figure-image">
    <a role="button">
        <img src="image-source" alt="image-alt" />
    </a>
</figure>

<figure class="figure-image">
    <a role="button">
        <img src="image-source" alt="image-alt" />
    </a>
</figure>

<figure class="figure-image">
    <a role="button">
        <img src="image-source" alt="image-alt" />
    </a>
</figure>

<figure class="figure-image">
    <a role="button">
        <img src="image-source" alt="image-alt" />
    </a>
</figure>

**Image Tests**

// Both anchor.length and image.length are 0 so of course the tests pass
'Anchors will be created for each image found': browser => {
    browser.elements('css selector', '.figure-image', elem => {
      // return elem.value
      elem.value.map(figure => {
        const anchors = browser.elementIdElements(figure.ELEMENT, 'tag name', 'a', anchor => { return anchor.value })
        const images = browser.elementIdElements(figure.ELEMENT, 'tag name', 'img', image => { return image.value })
        browser.assert.equal(anchors.length, images.length, 'Anchors match the amount of images')
      })
    })
  }


// Each anchors and images are just an object of nightwatch api commands when I log them out
'Anchors will be created for each image found': browser => {
    const anchors = browser.elements('css selector', '.figure-image > a', elem => {
      return elem.value
    })

    const images = browser.elements('css selector', '.figure-image > a > img', elem => {
      return elem.value
    })

    browser.assert.equal(anchors.length, images.length, 'Anchors match the amount of images')
  }

使用守夜比较元素数组以查看值是否匹配

0 个答案: