1) O documento descreve como o autor usou a ferramenta Watir-Webdriver para automatizar tarefas em um portal da Cielo que tinha uma interface difícil de usar. 2) O autor precisava extrair informações do portal da Cielo em planilhas do Excel diariamente, então projetou um scraper de tela usando o Watir-Webdriver. 3) O Watir-Webdriver permitiu que o autor automatizasse o login no portal, navegasse entre as páginas e frames, extraísse os dados e os exportasse para o Excel.

1. Automatizando Tarefas
com o Watir-Webdriver
aka. Minha guerra com o portal da Cielo

2. Lucas Prim

3. Administrador

4. Meio Engenheiro

5. Developer for fun and
profit há 14 anos.

6. Professor Boiada

7. Co-Founder e CTO do
Kimitachi

8. Meu objetivo aqui:
Falar rapidamente de um problema que
resolvemos usando a ferramenta watir-
webdriver em 4 partes.

9. Parte I: O Inimigo

10. Cielo
"Responsável pelo credenciamento de estabelecimentos comerciais, e pela
captura, transmissão, processamento e liquidação financeira das
transações realizadas com cartões de crédito e débito"
Imagens:
http://www.x-jetpacks.com/wp-content/uploads/death-star.png
http://kldsuportville.com.br/index/wp-content/uploads/2013/12/cartao.png

11. Cielo
"Responsável pelo credenciamento de estabelecimentos comerciais, e pela
captura, transmissão, processamento e liquidação financeira das
transações realizadas com cartões de crédito e débito"
Imagens:
http://www.x-jetpacks.com/wp-content/uploads/death-star.png
http://kldsuportville.com.br/index/wp-content/uploads/2013/12/cartao.png

12. Site da Cielo
Um verdadeiro inferno!

13. Site da Cielo
Um verdadeiro inferno!

14. Frameception
Frames dentro de frames

15. Teclado Virtual
Que muda a ordem dos números!!!

16. Código Críptico
Javascript inline, nomes com chaves, ids do tipo
“portlet_13_1_btnEntrar"

17. Código Críptico
Javascript inline, nomes com chaves, ids do tipo
“portlet_13_1_btnEntrar"

18. Não funciona no Chrome
What a shame…

19. Não funciona no Chrome
What a shame…

20. Está sujeito a coisas bizarras
(Isso aconteceu enquanto eu montava a apresentação)

21. O melhor de tudo!
Erros randômicos durante o processamento!!!

22. O melhor de tudo!
Erros randômicos durante o processamento!!!

23. Parte II: A Missão

24. “Eu preciso das
informações da Cielo
todas em Excel!"

25. Precisávamos construir
um screen scraper que:

26. Entrasse na cielo

27. Entrasse na cielo

28. Passasse pelos processos de
login (incluindo o teclado virtual
que muda a posição dos números)

29. Passasse pelos processos de
login (incluindo o teclado virtual
que muda a posição dos números)

30. Gerasse o relatório de
vendas do dia

31. Gerasse o relatório de
vendas do dia

32. Entrasse em cada um
dos grupamentos loucos
que a cielo faz

33. Entrasse em cada um
dos grupamentos loucos
que a cielo faz

34. Fizesse um “chupa-
cabra” nos dados

35. Fizesse um “chupa-
cabra” nos dados

36. Exportasse os dados
para excel

37. Exportasse os dados
para excel

38. Repetisse o processo
todos os dias

39. Repetisse o processo
todos os dias

41. Parte III: Planejamento

42. Três alternativas:

43. 1. Mechanize

45. 2. Selenium

47. 3. Watir

48. 3. Watir

49. 3. Watir

50. Na verdade eu usei o Watir
Webdriver (O Watir usa ele para
fazer testes automatizados)

52. Roda no Firefox, IE,
Chrome e Safari.

54. É ridículo de instalar

56. Tem uma DSL muito
foda bacana

57. Sério, saca só essa
DSL:

58. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'

59. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento'

60. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento’!
inputs = form.inputs(type: ‘text')

61. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento’!
inputs = form.inputs(type: ‘text’)!
inputs.first.set(‘aww yeah!’)
aww yeah!

62. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento’!
inputs = form.inputs(type: ‘text’)!
inputs.first.set(‘aww yeah!’)!
inputs.last.set(‘mah oee!’)!
mah oee!
aww yeah!

63. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento’!
inputs = form.inputs(type: ‘text’)!
inputs.first.set(‘aww yeah!’)!
inputs.last.set(‘mah oee!’)!
form.input(type: ‘submit’).click!
mah oee!
aww yeah!

64. b = Watir::Browser.new!
b.goto ‘http://www.cielo.com.br'!
form = b.form id: ‘consulta-
estabelecimento’!
inputs = form.inputs(type: ‘text’)!
inputs.first.set(‘aww yeah!’)!
inputs.last.set(‘mah oee!’)!
form.input(type: ‘submit’).click!

65. E tem muito mais:!
• Executa javascript lindamente (me salvou do teclado
virtual)
• Acessa frameceptions facilmente
• Faz drag and drop
• Suporta chamadas ajax com “Wait until present” ou
“Wait While Present”
• Tem comandos do tipo “tables”, “as”, “lis”, “uls”,
enfim, o negócio vai muito naturalmente!
• Read the docs: http://rubydoc.info/gems/watir-
webdriver/frames

66. Parte IV: Execução

67. Fizemos um design
básico:

68. Fizemos um design
básico:
Page!
• Realiza as interações
com as diferentes
páginas (cada page
object sabe da sua
página)

69. Fizemos um design
básico:
Page!
• Realiza as interações
com as diferentes
páginas (cada page
object sabe da sua
página)
Parser!
• Extrai e limpa os
valores extraídos das
páginas,
transformando-os em
objetos nativos
(Hashes e Arrays na
maioria)

70. Fizemos um design
básico:
Page!
• Realiza as interações
com as diferentes
páginas (cada page
object sabe da sua
página)
Parser!
• Extrai e limpa os
valores extraídos das
páginas,
transformando-os em
objetos nativos
(Hashes e Arrays na
maioria)
Exporter!
• Recebe os dados em
objetos nativos e
exporta para excel

71. Task
Fizemos um design
básico:
Page!
• Realiza as interações
com as diferentes
páginas (cada page
object sabe da sua
página)
Parser!
• Extrai e limpa os
valores extraídos das
páginas,
transformando-os em
objetos nativos
(Hashes e Arrays na
maioria)
Exporter!
• Recebe os dados em
objetos nativos e
exporta para excel

72. Implementamos e
botamos para rodar e…

73. Implementamos e
botamos para rodar e…

74. Implementamos e
botamos para rodar e…

75. Esquecemos das coisas
bizarras do site da
cielo…

76. Criamos mais um
objeto no nosso design:

77. Criamos mais um
objeto no nosso design:
NavigationStack!
• Ordena e executa a navegação
programada na task.
• Em caso de erro na execução, volta
os passos necessários
(browser.back) e tenta novamente
até o fluxo programado funcionar!

78. Adicionamos mais um
ingrediente com o
Headless

79. E pronto!

80. O sistema rodou por um tempo até
nosso CFO descobrir um serviço
da cielo chamado EDI que exporta
os dados sozinho :)

81. Mas ficou a lição: Serviço
de corno na web se
resolve facilmente com o…

82. Watir-Webdriver

83. Obrigado!
Lucas Prim!
CTO & Co-Founder @ Kimitachi
!
lucas.prim@gmail.com
@lucasprim

84. Parece que sobrou
tempo…

85. Chega a ser divertido
brincar com o watir!

86. Vamos fazer um hacker news
fetcher, que notifica no growl
quando o post tiver > 200 points.

88. require 'watir-webdriver'

89. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')

90. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')
browser.goto('http://news.ycombinator.com')

91. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')
browser.goto('http://news.ycombinator.com')
main_table = browser.tables.first

92. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')
browser.goto('http://news.ycombinator.com')
main_table = browser.tables.first
news_list_section = main_table.trs[3]
news_table = news_list_section.tables.first

93. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')
browser.goto('http://news.ycombinator.com')
main_table = browser.tables.first
news_list_section = main_table.trs[3]
news_table = news_list_section.tables.first
news = news_table.trs.map do |item|
content = item.text.split("n")
content[1]
end.compact

94. require 'watir-webdriver'
browser = Watir::Browser.new(‘chrome')
browser.goto('http://news.ycombinator.com')
main_table = browser.tables.first
news_list_section = main_table.trs[3]
news_table = news_list_section.tables.first
news = news_table.trs.map do |item|
content = item.text.split("n")
content[1]
end.compact
browser.close

96. Have Fun :D

97. Obrigado!
Lucas Prim!
CTO & Co-Founder @ Kimitachi
!
lucas.prim@gmail.com
@lucasprim