如何使用带有 cypress 的 ng5-slider 测试表单？

Question

有没有人知道如何用柏树测试 ng5-slider（例如更改值）。我尝试了文档中的建议（比如使用触发器），但我无法让它工作。

Answer 1

您可以尝试type('{rightarrow} {rightarrow}')将滑块向右移动并测试获得的新值。下面是我在ng5-slider示例站点中尝试过的示例测试，它运行良好。识别滑块并使用type()方法移动。默认滑块值为100，移动滑块后更改的值为“103”

describe('Try an Ng Slider test ', function () {
  it('Check the slider and test the new slider value', function () {
    cy.visit('https://angular-slider.github.io/ng5-slider/')
    cy.get('a:contains("Go to demo")').parents('.mt-4').find('a').contains("Go to demo").click()
    cy.wait(1000)
    cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuetext="100"]').type('{rightarrow}{rightarrow}{rightarrow}')
    cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuemax="250"]').invoke('attr', 'aria-valuetext', "103")
      .should('have.attr', 'aria-valuetext', '103')
    cy.scrollTo('top');
    })
  })