Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TESTANDO SEU CSS
ESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO
@eduardojmatos eduardomatos.me
OI, EU SOU O EDU
Soluções de comunicação que aproximam
médicos e pacientes
VOCÊS TEM UM
MINUTO PRA OUVIR
SOBRE TESTES?
PRA QUÊ TESTAR
1. Porquê ninguém sabe todos
os requisitos no começo do
desenvolvimento;
2. Pessoas não são perfeitas,
port...
REQUISITOS PARA UM BOM TESTE
PRECISA TER BOA PERFORMANCE
PRECISA SER INDEPENDENTE
PRECISA TESTAR AS COISAS CERTAS
DEVE USA...
E COMO FAZ PRA
TESTAR MEU CSS?
TESTES DE SINTAXE
FERRAMENTAS QUE CHECAM SE
VOCÊ ESCREVEU TUDO DIREITINHO
.button {
dispaly: inline-block;
color: #azul;
font-family: Arial, sans-serif
letter-spacing: 1.2em;
}
OU VIA COMMAND-LINE
npm install -g csslint
É REALMENTE NECESSÁRIO?
PRÉ-PROCESSADORES JÁ DISPARAM
ERROS QUANDO HÁ ERROS DE SINTAXE
GERALMENTE OS EDITORES DE CÓDIGO
POSSUEM PLUGINS QUE JÁ VAL...
TESTE EM UM PROGRAMA QUE ASSEGURA QUE AS
NOVAS ALTERAÇÕES NÃO IRÃO CAUSAR BUGS OU
ERROS
TESTES DE REGRESSÃO VISUAL
PRA QUÊ TESTAR LAYOUT?
TESTES VISUAIS NÃO ESCALAM!
LAYOUT, COMPONENTES,
TELAS
PRODUTIVIDADE
NO TESTE VISUAL (olho nú)
EVITAR TESTES MANUAIS
REPETITIVOS
E COM POSSÍVEIS FALHAS APÓS A
504939ª TENTATIVA
CHECAR ALTERAÇÕES VISUAIS APÓS UMA ENTREGA
CONTROLAR MUDANÇAS MUITO BRUSCAS
TESTAR VÁRIOS FORMATOS DE TELA
RASTREAR BUGS Q...
FERRAMENTAS DE TESTE
DE REGRESSÃO VISUAL
Succss.pages = {
'home': {
url:'http://www.conferenciacssbrasil.com.br/',
directory:'screenshots',
captures: {
'hold-date'...
"QUICK-INSTALL"
https://css-tricks.com/automating-css-regression-testing/
edite o
arquivo de
configuração
./backstop.json
Cactus.expect(".header", "font-size").toEqual("24px");
Cactus.expect("p", “font-size").toEqual("12px");
Cactus.expect(".he...
MAS E SE EU NÃO
QUERO “CODAR" PRA TESTAR?
O hardy gera um arquivo em texto que o cucumber
usa pra testes de comportamento
DEVO USAR TESTES
À PARTIR DE AGORA?
DEPENDE!
DO TAMANHO DO SEU PROJETO
DA COMPLEXIDADE DAS TELAS
DA IMPORTÂNCIA COM VISUAL QUE A
APLICAÇÃO TEM
BOM SENSO, SEMPRE!
eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me
OBRIGADO ;)
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Upcoming SlideShare
Loading in …5
×

Testes de css

3,746 views

Published on

Teste de integração, ok. Teste de JavaScript, ok. Teste de CSS.... O quê? Sim! Nessa palestra você vai aprender que é possível testar CSS sem muita dor de cabeça. Até o diretor de arte vai gostar.

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Testes de css

  1. 1. TESTANDO SEU CSS ESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO
  2. 2. @eduardojmatos eduardomatos.me OI, EU SOU O EDU
  3. 3. Soluções de comunicação que aproximam médicos e pacientes
  4. 4. VOCÊS TEM UM MINUTO PRA OUVIR SOBRE TESTES?
  5. 5. PRA QUÊ TESTAR 1. Porquê ninguém sabe todos os requisitos no começo do desenvolvimento; 2. Pessoas não são perfeitas, portanto, erram; 3. A complexidade das coisas tende a aumentar conforme o tempo;
  6. 6. REQUISITOS PARA UM BOM TESTE PRECISA TER BOA PERFORMANCE PRECISA SER INDEPENDENTE PRECISA TESTAR AS COISAS CERTAS DEVE USAR O MÍNIMO DE RECURSO.
  7. 7. E COMO FAZ PRA TESTAR MEU CSS?
  8. 8. TESTES DE SINTAXE FERRAMENTAS QUE CHECAM SE VOCÊ ESCREVEU TUDO DIREITINHO
  9. 9. .button { dispaly: inline-block; color: #azul; font-family: Arial, sans-serif letter-spacing: 1.2em; }
  10. 10. OU VIA COMMAND-LINE npm install -g csslint
  11. 11. É REALMENTE NECESSÁRIO?
  12. 12. PRÉ-PROCESSADORES JÁ DISPARAM ERROS QUANDO HÁ ERROS DE SINTAXE GERALMENTE OS EDITORES DE CÓDIGO POSSUEM PLUGINS QUE JÁ VALIDAM ESSES ERROS
  13. 13. TESTE EM UM PROGRAMA QUE ASSEGURA QUE AS NOVAS ALTERAÇÕES NÃO IRÃO CAUSAR BUGS OU ERROS TESTES DE REGRESSÃO VISUAL
  14. 14. PRA QUÊ TESTAR LAYOUT?
  15. 15. TESTES VISUAIS NÃO ESCALAM! LAYOUT, COMPONENTES, TELAS PRODUTIVIDADE NO TESTE VISUAL (olho nú)
  16. 16. EVITAR TESTES MANUAIS REPETITIVOS E COM POSSÍVEIS FALHAS APÓS A 504939ª TENTATIVA
  17. 17. CHECAR ALTERAÇÕES VISUAIS APÓS UMA ENTREGA CONTROLAR MUDANÇAS MUITO BRUSCAS TESTAR VÁRIOS FORMATOS DE TELA RASTREAR BUGS QUE SÓ UM DESIGNER IDENTIFICA (FONTE, PIXEL, CÓDIGO DE CORES, ETC.)
  18. 18. FERRAMENTAS DE TESTE DE REGRESSÃO VISUAL
  19. 19. Succss.pages = { 'home': { url:'http://www.conferenciacssbrasil.com.br/', directory:'screenshots', captures: { 'hold-date':'.section.hold-date', 'speakers': 'section.hold-speakers .speaker-list .speaker-item' } } }; Succss.viewports = { 'default': { width: 1366, height: 768 }, 'mobile-landscape': { width: 640, height: 480 } };
  20. 20. "QUICK-INSTALL" https://css-tricks.com/automating-css-regression-testing/
  21. 21. edite o arquivo de configuração ./backstop.json
  22. 22. Cactus.expect(".header", "font-size").toEqual("24px"); Cactus.expect("p", “font-size").toEqual("12px"); Cactus.expect(".header", “font-family").toContain("Helvetica"); Cactus.expect(".header").toHaveMargin("10px 5px");
  23. 23. MAS E SE EU NÃO QUERO “CODAR" PRA TESTAR?
  24. 24. O hardy gera um arquivo em texto que o cucumber usa pra testes de comportamento
  25. 25. DEVO USAR TESTES À PARTIR DE AGORA?
  26. 26. DEPENDE! DO TAMANHO DO SEU PROJETO DA COMPLEXIDADE DAS TELAS DA IMPORTÂNCIA COM VISUAL QUE A APLICAÇÃO TEM
  27. 27. BOM SENSO, SEMPRE!
  28. 28. eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me OBRIGADO ;)

×