Desenvolvimento de front-end: prática de automação baseada em cipreste

Como um pseudo-desenvolvimento, sou responsável pelo desenvolvimento de front-end em um projeto de plataforma. A estrutura de desenvolvimento é vue. Neste artigo, vou apresentar a partir da perspectiva do desenvolvimento de front-end, como eu uso o cipreste.

[x] Como usar cipreste em vue
[x] Como operar o cipreste
[x] Como escrever casos de teste
[x] Como resolver o problema dos dados de teste
[x] O problema de posicionamento do elemento encontrado
[x] Como tratar cipreste
[x] O cipreste é a melhor ferramenta?
[x] E quanto ao teste?

Como usar cipreste em vue

Cupom grátis para receber m.fenfaw.cn

O Vue fornece uma vue-climaneira rápida de criar um projeto vue.

vue create hello-world

Selecione no item de instalação selecionado: E2E testing-> cypress.

Como fazer o teste

Comece por comando

> npm run test:e2e

Abra a janela de gerenciamento do cyprss

Clique Run all specsou execute um arquivo de teste

Tomando o 项目管理módulo como exemplo, leva apenas 14 segundos para executar 5 casos de uso, o que é muito rápido.

Como escrever casos de teste

Da perspectiva do desenvolvimento de front-end para escrever casos de uso de automação de IU, a experiência geral ainda é muito conveniente!

Primeiro, defina atributos uniformes para todos os elementos a serem manipulados.

<el-button cy-data="create-project" type="primary" @click="showCreate">创建</el-button>
...
<el-button cy-data="edit-project" type="text" size="small" @click="showEdit(scope.row)">编辑</el-button>
<el-button cy-data="delete-project" type="text" size="small" @click="deleteProject(scope.row)">删除</el-button>
...

HTML não é recomendado para aceitar a oferta id, name, class... esses atributos, eles geralmente têm um propósito designado, por exemplo, classé usado para estilos CSS referência. Assim cy-data=xxxx, pode evitar conflitos e ser mais unificado e padronizado.

Em seguida, é escrever código de automação cipreste

describe('项目管理', () => {
  it('添加项目', () => {
    cy.visit('/#/project')
    cy.get('[cy-data=create-project]', { timeout: 3000 }).click()
    cy.wait(1000)
    cy.get('[cy-data=project-name]', { timeout: 3000 }).type('项目名称')
    cy.get('[cy-data=project-desc]', { timeout: 3000 }).type('项目备注信息')
    cy.get('[cy-data=save-button]', { timeout: 3000 }).click()  // 保存项目
  });
  // ...
})

Como resolver o problema dos dados de teste

Escrevemos casos de teste automatizados, independentemente da interface ou IU enfrentará o problema dos dados de teste. Por exemplo, se eu quiser testar o login, primeiro preciso criar os dados do usuário e, se quiser testar a pesquisa, primeiro preciso criar um lote de dados pesquisáveis.

Por esta razão, temos que usar setUp/treaDownesses acessórios na automação para escrever um grande número de pré ou pós-ações para completar essas preparações. Do ponto de vista do teste, isso sem dúvida torna nossos casos de teste mais complicados e, portanto, é fácil fazer com que os casos de uso de automação falhem devido aos dados de teste.

Então, como funciona o desenvolvimento de front-end? Antes disso, devemos primeiro entender o processo de desenvolvimento:

Durante o processo de desenvolvimento do projeto. Para completar o trabalho de desenvolvimento com mais facilidade, o front-end não pode esperar até que o back-end tenha desenvolvido a interface antes de escrever as funções do front-end. Portanto, depois que a interface é definida com o back-end, os dados da interface são simulado por meio de mock, que é voltado para o desenvolvimento de mock .

Portanto, no processo de desenvolvimento orientado a simulação, é inevitável que o front-end e o back-end precisem ajustar os parâmetros da interface. Por exemplo, o front-end precisa adicionar um campo ou o back-end diz que a estrutura de dados precisa ser ajustado.

Usamos a interface de Internet YAPI definido, ele pode definir os dados simulados gerados aleatoriamente, cada um dos dados de campo podem ser gerados aleatoriamente, por exemplo, name, email, datatimee semelhantes.

Você pode acessar diretamente a interface simulada por meio do seguinte link:

https://yapi.baidu.com/mock/40650/api/v1/projects/list

Como configurar diferentes ambientes em um projeto vue? Você precisa aprender o desenvolvimento vue ...

Problemas encontrados no posicionamento do elemento

No entanto, adicionar métodos de posicionamento a cada elemento às vezes não é tão simples quanto pensamos.

Se você usou bibliotecas de interface do usuário front-end (por exemplo, element-ui), você descobrirá que nem todos os elementos da página são escritos à mão em HTML. Por exemplo, a seguinte janela pop-up.

A implementação por meio de element-UI é assim.

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({ type: 'success',  message: '删除成功!' });
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });          
        });
      }
    }
  }
</script>

Percorra completamente a renderização da interface do usuário do elemento, não temos para onde 确定, 取消como botões mais um posicionamento de propriedade dedicado. Neste momento, o desenvolvimento de front-end não tem vantagens. Você deve honestamente localizar os elementos na página do front-end e escrever um posicionamento css complexo.

No entanto, mesmo que eu personalize o posicionamento, às vezes o elemento não é único. Por exemplo

Para a lista acima, 自定义定位o resultado é um conjunto de elementos. No entanto, se for apenas um grupo de elementos, não há necessidade de retirá-lo separadamente. Conforme mostrado na figura acima, existem 4 elementos na lista e 8 elementos são obtidos por posicionamento, e os 4 primeiros estão ocultos. Isso está relacionado à biblioteca de UI de elemento usada, porque os dados são gerados aleatoriamente pelo YAPI e o quinto elemento de exibição não pode ser manipulado. cipreste fornecido forcemuito útil, ele forçaria um elemento oculto para operar.

cy.get('[cy-data=edit-project]', { timeout: 3000 }).first().click({ force: true })

Como olhar para o cipreste

Perspectiva de desenvolvimento de front-end

Como desenvolvedor front-end, objetivamente falando, o processo de uso do cipreste não encontrou muita resistência. Deixe-me resumir.

Como o yapi é usado, não há necessidade de considerar a preparação de dados de teste.
Não há necessidade de escrever etapas dependentes, principalmente porque as funções de negócios atuais não têm procedimentos operacionais muito longos.
Na maioria dos casos, você pode personalizar os atributos do elemento e não precisa perder muito tempo no posicionamento e não precisa escrever um posicionamento muito longo.
A velocidade de execução do teste é aceitável e a execução de 28 casos de uso leva cerca de 80 segundos.

Perspectiva de teste

Como um teste automatizado, se você me permitir usar cipreste.

Para verificar a exatidão dos dados, não posso pedir aos desenvolvedores que usem dados falsos yapi, então ainda tenho que preparar os dados sozinho.
De acordo com a situação do negócio, as ações pré / pós necessárias são inevitáveis.
Embora seja um pouco difícil convencer o desenvolvimento de um elemento personalizado unificado, digo que não é impossível!
O Cypress faz a automação da IU mais rápido do que o selênio, mas em comparação com o selênio, ele não oferece suporte a mais navegadores, não oferece suporte a chamadas remotas em grade e nem mesmo pode escolher um idioma com base em sua proficiência. Portanto, as vantagens do cipreste não são avassaladoras e as especificidades ainda dependem da demanda.

O cipreste é a melhor ferramenta

O cypress é a melhor ferramenta para toda a automação de IU?

Vue/ReactO Cypress está realmente bem integrado na estrutura de desenvolvimento de front-end , o que torna nosso uso mais conveniente.

O Selenium está bem integrado no framework web django de back-end parcial com o qual entrei em contato, e efeitos semelhantes também podem ser obtidos. Eu li um "Desenvolvimento Orientado a Testes com Python" antes. O livro combina testes de IU baseados em Selenium com desenvolvimento em Django.

Portanto, a conclusão é escolher a ferramenta de teste E2E apropriada em combinação com sua estrutura de desenvolvimento.

E quanto ao teste?

Por muito tempo, acreditamos naturalmente que os testes de automação de IU deveriam ser feitos por meio de testes, com o objetivo de alto nível de ser capaz de fazer testes de automação de IU! Mas, pela minha prática acima, descobriremos que, de fato, as vantagens de desenvolver para automação de IU são óbvias. E quanto ao teste? Podemos apenas voltar para testar a função honestamente? claro que não.

Nem todo desenvolvedor sabe como escrever testes de automação de IU, embora não seja particularmente difícil para eles. Nós nos tornamos "treinadores" a esse respeito, ensinando os desenvolvedores a escrever testes de automação de IU e como projetar casos de teste mais abrangentes.
Nem toda equipe de desenvolvimento de equipe tem tempo para escrever testes de automação de IU, ou eles não estão dispostos a escrever, então por que não nos juntamos a eles? Da maneira que apresentei anteriormente, estou profundamente envolvido na preparação de testes automatizados para o projeto. Em vez de fazer isso, o desenvolvimento do projeto e os testes automatizados são completamente separados e executados separadamente.

Durante o Festival da Primavera, reli o "Método de Teste do Google" e tive uma nova sensação. Sob a premissa de capacidade suficiente de desenvolvimento de teste, quando o objetivo da equipe é melhorar a qualidade do produto, a questão de quem fazer o teste automatizado torna-se irrelevante. Tão importante.