Pular para o conteúdo principal

Criando testes em aplicação angular com Protractor

 Ao longo do desenvolvimento de sua aplicação fica cada vez mais difícil de testar todos os cenários possíveis conforme incluímos novas funcionalidades. Este é um velho assunto e mais uma vez a automação de testes esta ai para nos ajudar.

Se você esta criando suas aplicações em angular e sente a necessidade de saber se as páginas funcionam conforme o esperado, é uma boa prática implementar os testes com o PROTRACTOR



Quando você cria uma aplicação com angular cli, são incluídos os arquivos necessários para realizar testes automatizados com protractor. Estes arquivos podem ser encontrados no diretório e2e/src. Na pasta são encontrados arquivos de configuração do protractor e os arquivos iniciais para com os testes com código similar ao a seguir:




Na construção dos testes você terá a disposição a união matadora do jasmine na parte de checagem com teste unitário e o selenium na parte de execução de navegador com teste de sistema. A organização de arquivos para teste contém uma combinação de arquivo .po.ts e outro .e2e-spec.ts. Por padrão toda iteração com navegador como navegação e obtenção de elementos deve ficar no arquivo po.ts, que conterá nossos objetos da pagina ou page objects. No arquivo e2e-spec é onde incluímos a lógica dos testes utilizando jasmine e importando a class de page objects para interagir com objetos do navegador e validar o sistema. Existe uma longa lista de métodos prontos para utilizar em seus testes e todos eles podem ser acessados na pagina de api do protractor

No código a seguir irei exemplificar alguns testes simples para verificar dados na tela. Neste código são testados navegação para url de página categorias, existência de tabela categorias e existência de linhas no corpo da tabela.



Para executar os testes e2e criados na sua aplicação basta digitar:
ng e2e 

Após a execução do comando no terminal, o resultado dos testes foram os seguintes:


O código de exemplo pode ser visto no github.

Comentários

Postagens mais visitadas deste blog

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f   é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

C# :Removendo propriedades nulas ao serializar JSON

Olá Para serializar uma classe em formato JSON em c#,por muitas vezes é utilizado o pacote Newtonsoft . Em alguns momentos há a necessidade de serializar somente as propriedades que estiverem preenchidas no objeto, removendo assim as que estiverem nulas. Para isto você pode utilizar a propriedade  NullValueHandling da classe  JsonSerializerSettings . Segue exemplo: Até a próxima

Como criar componente dropdown com checkbox ASP.NET MVC

Neste post irei demonstrar a criação de um componente  dropdown com checkbox para selecionar as opções desejadas. Para começar podemos criar uma classe estática para criar o componente que será utilizado numa página razor. public static class Extensions { public static MvcHtmlString DropdownCheckbox( this HtmlHelper helper, string placeholder, IEnumerable<SelectListItem> selectList, object htmlAttributes) { string items = "" ; string rodape = "" ; if (htmlAttributes == null ) { htmlAttributes = new { }; } var attributes = new ExpandoObject() as IDictionary< string , Object>; foreach (PropertyInfo property in htmlAttributes.GetType().GetProperties()) { attributes.Add(property.Name, property.GetValue(htmlAttributes)); } string idDropdown = "dr