Início / coding / Perguntas / 79092144
Accepted
MeltingDog
Asked: 2024-10-16 08:53:12 +0800 CST

Como faço para analisar um valor de um atributo de dados no Cypress?

  • 772

Tenho um campo de entrada:

<input type="range" id="amtRange" value="0" min="280" max="1400">

Quero obter o valor do minatributo e ver se ele é menor que outro valor pré-existente, ou seja, o valor no minatributo (280) deve ser menor que o número na amtvariável.

Posso obter o valor como uma string assim:

cy.get('#amtRange').invoke('attr', 'min');

Mas não consigo descobrir como passá-lo como um inteiro. Eu tentei o seguinte:

const amt = 286;
let minAmt = cy.get('#amtRange').invoke('attr', 'min');
minAmt = parseInt(minAmt);
minAmt.should('be.lessThan', amt);

Mas isso produz o erro: TypeError: minAmt.should is not a function.

Eu também tentei:

const amt = 286;
cy.get('#amtRange').then(($amtInput) => {
    let minAmt = parseInt($amtInput.invoke('attr', 'min'));
    minAmt.should('be.lessThan', amt);
});

Mas isso produz o erro: $amtInput.invoke is not a function.

Como posso conseguir isso?

javascript

1 respostas

  1. Best Answer

    Fundamentalmente, o que você está tentando não faz sentido. Você está perdendo alguns conceitos bem básicos para escrever testes no Cypress. Veja o primeiro trecho:

    let minAmt = cy.get('#amtRange').invoke('attr', 'min');

    .invokenão retorna o valor, ele o produz , no sentido Cypress :

    Os comandos Cypress são assíncronos e são enfileirados para execução em um momento posterior. Enquanto os comandos são executados, seus assuntos são produzidos de um comando para o próximo. Isso ocorre porque muito código Cypress útil é executado entre cada comando para garantir que tudo esteja em ordem.

    Mesmo que isso funcionasse , e então:

    minAmt = parseInt(minAmt);

    na verdade te deu um número, a próxima linha:

    minAmt.should('be.lessThan', amt);

    não segue. minAmté um número, não uma cadeia Cypress; não tem shouldmétodo.

    Da mesma forma, o segundo trecho:

    cy.get('#amtRange').then(($amtInput) => {
    let minAmt = parseInt($amtInput.invoke('attr', 'min'));
    minAmt.should('be.lessThan', amt);
});

    fornece o elemento jQuery real (como o $prefixo pretende indicar - não use this onde você não tem um elemento!) Que não tem um invokemétodo, no entanto; tem o attrmétodo . Mas, novamente, mesmo se você fez a coisa certa:

    let minAmt = parseInt($amtInput.attr('min'));

    o resultado é um número , sem shouldmétodo.

    Neste ponto você pode usar a "afirmação Mocha" vanilla :

    expect(minAmt).to.be.lessThan(amt);
               // ^^^^^^^^^^^ same as should argument

    No entanto, isso impactaria a capacidade de repetição . Idealmente, você quer ter uma única cadeia de consultas com uma asserção no final. Por exemplo, outra maneira de escrever seria:

    cy.get('#amtRange').invoke('attr', 'min').should((minAmt) => {
  expect(parseInt(minAmt)).to.be.lessThan(amt);
});

    Eu recomendo fortemente usar o TypeScript (que lhe dirá que a Cypress.Chainable<string | undefined>não é a string) e/ou o plugin ESLint (que lhe dirá para não atribuir valores de retorno de comando ) para destacar esse tipo de erro muito antes.

    • 3

relate perguntas