如何使用带有柏树的 ng5-slider 测试表单？答案

【问题标题】：How to test form using a ng5-slider with cypress?如何使用带有柏树的 ng5-slider 测试表单？
【发布时间】：2018-12-28 08:31:50
【问题描述】：

有谁知道如何用 cypress 测试 ng5-slider（例如更改值）。我尝试了文档中的建议（例如使用触发器），但无法使其工作。

【问题讨论】：

标签： angular cypress

【解决方案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');
    })
  })

【讨论】：

【解决方案2】：

您可以触发 mousedown 事件，然后将鼠标移动到文档中的特定位置。至少我在测试中是这样做的。

cy.get('span[data-cy="priceSlider"] > span.MuiSlider-thumb[data-index="0"] ')
            .focus()
            .trigger("mousedown")
            .trigger("mousemove", { which: 1, pageX: 460 })

文档链接：https://docs.cypress.io/api/commands/trigger.html#Mouse-Events

【讨论】：