Criar Post sobre utilizar javascript no Power Automate

gabrielbdornas commented 1 month ago

Aproveitei o conhecimento que teria que ser criado para o Webnar Automatiza.Mg do dia 13/08/2024.

Primeira versão publicada no YouTube

Texto Sugerido pelo GPT:

Aqui está uma sugestão para o texto da aula, organizada por tópicos conforme solicitado:

Aula: Executando Código JavaScript com Power Automate

1. Introdução ao HTML

O HTML (HyperText Markup Language) é a linguagem base para criar páginas web. Ele define a estrutura de um site, utilizando uma série de tags que indicam diferentes tipos de conteúdo.
Principais tags:
- <html>: A tag raiz que envolve todo o conteúdo de uma página web.
- <head>: Contém informações sobre o documento, como o título e links para scripts ou arquivos CSS.
- <body>: Envolve o conteúdo visível da página, como texto, imagens e botões.
- <h1> a <h6>: Tags de cabeçalho que indicam a hierarquia dos títulos.
- <p>: Define um parágrafo de texto.
- <a>: Define um link.
- <div> e <span>: Usadas para estruturar a página, organizando blocos de conteúdo.

2. Criando uma Página HTML Simples

Para consolidar o que vimos, vamos criar uma página simples que inclui um título, um parágrafo e um botão. Esse exemplo ajudará a visualizar como as tags funcionam na prática.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Simples</title>
</head>
<body>
    <h1>Bem-vindo ao Exemplo de HTML</h1>
    <p>Este é um parágrafo de exemplo.</p>
    <button id="meuBotao">Clique em mim</button>
</body>
</html>

3. O que é JavaScript?

JavaScript é uma linguagem de programação voltada para a web, usada para manipular o conteúdo HTML de uma página, tornando-a interativa e dinâmica.
Funções importantes no JavaScript:
- document.getElementById(id): Usada para selecionar um elemento específico baseado no seu id único.
- document.getElementsByClassName(class): Seleciona todos os elementos que têm a classe especificada. Retorna uma coleção de elementos, o que requer iterar sobre eles para realizar ações.

4. Diferença entre getElementById e getElementsByClassName

getElementById retorna diretamente o elemento único com o id especificado, permitindo o acesso imediato a suas propriedades e métodos.

Exemplo:
```
var botao = document.getElementById('meuBotao');
botao.innerHTML = "Novo Texto do Botão";
```
getElementsByClassName retorna uma lista de elementos, o que significa que é necessário acessar os elementos individualmente para interagir com eles. Podemos usar recursos como element.children ou element[i] para manipular os elementos da lista.

Exemplo:
```
var elementos = document.getElementsByClassName('minhaClasse');
elementos[0].style.backgroundColor = "blue";
```

5. Iterando em uma Lista de Elementos

Quando você usa getElementsByClassName, normalmente precisa percorrer a lista retornada para modificar ou manipular todos os elementos que compartilham aquela classe.

Exemplo:
```
var botoes = document.getElementsByClassName('botaoClasse');
for (var i = 0; i < botoes.length; i++) {
  botoes[i].innerHTML = "Botão " + (i + 1);
}
```

6. Selecionando um Campo de Seleção e Preenchendo um Campo de Texto

Selecionando um valor em um campo de seleção (dropdown):

Exemplo:

var select = document.getElementById('meuSelect');
select.value = 'opcao2';  // Define a opção selecionada para "opcao2"

Preenchendo um campo de texto:

Exemplo:

var input = document.getElementById('meuInput');
input.value = 'Texto preenchido via JavaScript';

7. Aplicação com Power Automate

No contexto do Power Automate, o JavaScript pode ser utilizado quando há dificuldades para automatizar interações com uma página web, como cliques em botões que não respondem bem. O JavaScript permite uma forma mais direta de manipular o DOM da página, facilitando a execução das tarefas.

Sugestão de Tópico Adicional:

Manipulação de Eventos com JavaScript

Como lidar com eventos, como cliques de botão ou mudança de valor de um campo de texto, utilizando a função addEventListener. Isso pode ser útil quando queremos realizar ações baseadas na interação do usuário.

Exemplo:

var botao = document.getElementById('meuBotao');
botao.addEventListener('click', function() {
    alert('Botão foi clicado!');
});

Esse último tópico pode ser útil para mostrar como capturar eventos diretamente no Power Automate usando JavaScript.

Essa estrutura oferece uma boa base para a aula, cobrindo conceitos essenciais de HTML e JavaScript, além de exemplos práticos que se conectam diretamente com as demandas de automação dos alunos.

gabrielbdornas commented 1 month ago

No campo senha do sei é necessário buscar o valor dos dois campos input, exemplo: input.value.

Lembrar que o segundo a senha é mostrada, então tomar cuidado com isso.

gabrielbdornas commented 1 month ago

Transcição do texto do primeiro vídeo:

Bom, vamos lá, vamos falar de Javascript no Power Automate. Então você tá aí usando o Power Automate, tá bombando nos seus fluxos, tá conseguindo entrar em páginas da web, mas tem um problema, de vez em quando você não consegue usar algumas ações porque o tab não funciona, o click não funciona e aí você fica se perguntando qual seria a melhor maneira. E aqui hoje eu vou te mostrar como utilizar o Javascript para resolver esse tipo de problema, e essa é mais uma opção aí na sua caixa de ferramentas para usar dentro do Power Automate, vamos abrir ele aqui e aí a gente já começa a explicar como que isso vai funcionar. Primeira coisa a gente tem que falar é do que que é o HTML, eu não sei se você sabe, vamos abrir aqui também o navegador. E eu vou entrar no sistema de protocolo do governo estado de Minas Gerais, que eu sei, vou aumentar aqui um pouquinho o zoom, deixa eu ver, beleza. Eu não sei se você sabe, mas uma página web é construída usando o HTML, que do que é o hyper test market language, enfim, não precisa decorar isso não. O HTML é uma linguagem, é a linguagem básica para criar as páginas do web e ela define as estruturas de um site, ela basicamente usa uma estrutura de hierarquia, essa estrutura ela é construída usando o que a chama de tag, e essas tags é que vão identificar quais os elementos, qual a diferença dos elementos numa página. Então, usando o exemplo aqui do CI, que é uma página, como eu disse, do protocolo, do sistema de protocolo do estado de Minas Gerais. Como que você vê o HTML usado para construir qualquer página da web? É simples, você vai clicar com o botão direito na página que você quer e vai selecionar a opção inspecionar. Ele abre para você do lado direito uma caixinha de texto, deixa eu ver se eu consigo aumentar isso aqui. Ele abre para você essa caixinha ali do lado direito e aí ele vai fazendo um paralelo com o que está do lado esquerdo, o que é que é o HTML e qual que é o resultado final disso na tela? Então, o que é que é o HTML que você está vendo aí do seu lado direito e o que é que é o resultado que você está vendo do seu lado esquerdo. Tudo bem? Beleza. Então, você vê o seguinte, eu falei que essa é uma estrutura, o HTML é o que define a estrutura do site. Ele começa com a tag HTML. Então, se você passa o mouse em cima dele aqui, você vê que ele seleciona do lado esquerdo toda a página. Então, toda a página HTML vai começar com uma tag HTML. E aí, nessa estrutura de hierarquia, ele tem duas outras tags. Uma é o red e outro é o body. O red, eu vou passar o mouse aqui, você vê que ele não selecionou nada. Por quê? Deixa eu abrir ele aqui para vocês verem. Dentro do red ficam informações a respeito da página. É o que a gente chama de meta dado. Ele não vai ter neste momento para essa explicação nenhuma informação importante para você. Então, você não precisa se preocupar com o red. Você vai precisar se preocupar com o body. Porque dentro do body, quando eu selecionei o body aqui, ele volta do lado esquerdo, selecionar de azul, é mostrando que aquilo que está ali dentro, selecionar de azul, são coisas dentro da tag body. Beleza. E aí, toda vez que você passar o mouse, ele vai indicando para você qual que é aquela estrutura você quer. Esse pode parecer simples, né? Essa é essa página inicial, mas é uma estrutura complexa aqui de HTML. Então, para gente descobrir qual que é a tag de um elemento, eu aconselho a gente fazer o contrário. Em vez de eu passar o mouse do lado direito, eu vou passar o mouse do lado esquerdo. Porque ele já faz um filtro me levando diretamente naquele elemento que eu quero ver. Como que eu vou fazer isso? Eu vou vir aqui em cima, vou clicar nessa setinha aqui de selecionar um elemento e vou passar o mouse. Está vendo que ele está selecionando do lado esquerdo e fazendo o filtro do lado direito? Então, na hora que eu venho aqui no cei, eu vejo e clico aqui. Ele já coloca para mim que essa logotipo do cei está dentro de uma tag que chama div. A div ela é usada na estrutura da página. Então, ela está dentro de uma tag que chama div e o ID dela é a div logo. O ID nós vamos ver um pouquinho ali para frente, mas ele é basicamente um identificador que deixa aquela tag única, né? O ID vem de identificação. Então, na hora que a gente for procurar isso para ela no Power Automate, toda vez que a tag tiver um ID, isso facilita minha vida. Vamos ver isso mais para frente. E aí, eu decino o mouse aqui, vamos fazer de novo, vou passar aqui no usuário. Então, ele me fala que o campo usuário está dentro de uma tag que chama input, o que é um pouco fácil de ficar. Ou seja, é um lugar onde você vai colocar um input para o meu sistema, uma entrada de informação. Mas esse input, na hora que a gente abre, ele não tem como lá em cima um ID, ele só está falando para a gente. Vou passar um mouse aqui de novo e a nossa VPN caiu, fazendo o vídeo longo, me fazendo passar vergonha. Voltou, graças a Deus, só porque eu comecei a criticar. Mas vou voltar aqui para o texto. Eu passando o mouse aqui, ela me mostra que está dentro de uma tag input e que essa tag não tem um ID. O que tem um ID é uma tag que está acima dela, que é uma tag. Ou seja, o meu input, ela é filha, guardem essa palavra, ela é filha de uma tag superior que é uma divi que faz a estrutura desse formulário. Beleza? Assim como ela, a gente tem outras aqui, eu tenho outro input que também não tem, eu falei errado com vocês, o ID, o input ele tem a ID, olhei errado. O que facilita a minha vida, porque a partir desse ID que eu vou achar aquele elemento. Do mesmo jeito, a senha também é uma tag de input que tem o ID PWD senha. O órgão é uma tag select, que tem o ID SelectOrgon. Beleza? Existem várias outras tags que a gente poderia usar, eu vou me ater aqui a essas duas, mas a gente poderia ter cabeçalhos, que são tags H1 até H6, tem a tag de parágrafo, tem a tag de link e por aí vai. Eu vou ficar no input e no select aqui, que é o que a gente vai precisar para dar os exemplos, mas eu acho que vai ficar claro. Vou aproveitar, vou pegar aqui também a tag button, ou seja, é o nosso botão. Como que isso aqui foi construído na tela através de uma tag button, que também tem o ID Acessar. O que fica, o que facilita bastante a nossa vida. Vamos usar então JavaScript para preencher o nosso campo do formulário que é o usuário. Vamos de novo aqui, passo o mouse em cima do select, passo o mouse em cima do meu campo. Eu vi que essa tag é uma tag de input que tem o ID igual o text usuário. Do dois clipe no text usuário, control C, só para conseguir selecionar esse ID, eu poderia escrever também, mas eu vou selecionar, vou dar um control C só para ficar mais fácil. Vou ouvir aqui no console que é onde a gente vai executar o nosso código JavaScript. Nossa, Gabriel, mas JavaScript, que confusão, isso é muito complexo. Calma, calma, você nem viu o eu fazendo, você já está nervoso. O JavaScript é uma linguagem de programação que é voltada para a web, e ela é usada exatamente para manipular o conteúdo de uma página HTML, o que deixa ela dinâmica. Então, se você não precisa de saber JavaScript a fundo para conseguir usar isso ali no Power Automate, pelo contrário, eu vou te ensinar duas funções e com essas duas funções você vai conseguir resolver praticamente todos os seus problemas. Se você tem interesse em aprofundar em como o JavaScript funciona, vai embora, mete bronca, é assim que tem que ser, mas aqui se você não está querendo aprofundar, não precisa ter medo, porque aqui você não vai precisar de um conhecimento a fundo para conseguir usar, pelo contrário. Então, vamos lá. Então, eu já vi que a página HTML, a página web, ela é feita de HTML e para manipular esse HTML eu uso JavaScript. Como? O uso, da mesma maneira, vou fechar aqui de novo e vou inspecionar, vou começar tudo zero, vou inspecionar a página, ele entra como default nessa opção Elements, eu vou aqui do lado direito no console e aí eu vou escrever o seguinte, documento, você vê que na hora que eu começo a digitar ele me ajuda. Se você estiver digitando, essa é a primeira dica do JavaScript, se você estiver digitando aqui no console e ele não te ajudar, opa, acende uma luzinha aí que pode ser que você esteja no caminho errado. Toda vez que ele te ajudar, você está no caminho certo. O que que o documento, então eu setinha para baixo aqui em enter, o que que o documento significa? Você vê que ele deixou o zoom, toda a página ali, como se a gente tivesse selecionando com mouse ali nas opções do Element que eu mostrei no início. O documento significa todo esse documento que eu estou visualizando do lado esquerdo, é como se eu tivesse selecionando toda aquela tag inicial HTML, beleza? Eu dou um botinho e eu falo assim, o que que eu quero? Eu quero o campo usuário, né, que eu já sei o ID dele, então eu vou usar uma função que chama get element by ID. Eu começo a digitar, ele já me ajuda, setinha para baixo, eu clico no enter, ele já puxa tudo para mim. Abo parêntese porque eu tenho que pensar como parâmetro para essa função do documento. O ID que eu quero buscar, então abro aspas, controve porque eu já tinha selecionado o ID, fecho aspas, fecho parentes, dou um enter. Olha que interessante, ele trouxe para mim só um input. Então agora eu só tenho aqui selecionado o input, beleza? Como que eu manipulo esse input usando o JavaScript? Eu vou, setinha para cima aqui, trazer de novo a minha syntax, eu vou pôr esse elemento em uma variável, então a variável é aquela caixinha que eu uso para salvar uma informação, porque no futuro eu vou precisar de usar ela, eu vou fazer exatamente isso, eu vou chamar isso aqui de usuário. Então o usuário vai ser igual o meu documento, ponto, get element by ID, passando o ID do elemento que eu preciso, dou um enter. Se eu digitar aqui agora o usuário, você vê que ele já gravou isso para mim na ajuda dele. Ele trouxe para mim de novo. Olha que interessante, na hora que você traz esse elemento, se você abrir ele aqui, ah, esse aqui não tem jeito de abrir não, beleza? Mas ele vai falar o seguinte para você, usuário, ponto, quando você dá o ponto, ele te dá uma série de opções, né? Nós vamos usar a opção aqui, value. Então qual que é o valor que está preenchido nesse usuário neste momento? Aspa sem nada, o que fica vazio. Eu posso fazer o seguinte, o usuário, ponto, value, igual a Gabriel. Gabriel é um texto importante, eu preciso colocar ele entre aspas. Na hora que eu dou um enter, olha o que que ele preenchiu lá para mim, Gabriel. Então toda vez que eu usar essa variável que eu criei com o atributo value, ele vai sobre escrever aquele value para mim. Eu posso colocar aqui outro usuário, pedo, ele vai sobre escrever aquele valor do value ali para a gente na tela, tá bom? Então assim, eu já tenho o meu usuário, agora eu vou buscar, eu já tenho a minha tag de usuário, eu já sei como ela. Agora eu vou buscar o campo senha. Então eu vou aqui no elemento, vou clicar na opção de selecionar ali pelo lado esquerdo, vou passar o mouse até chegar no campo que eu quero, clico, acho o ID daquela tag, seleciono ela, dei dois cliques aqui contra o C, volto lá para o meu console e faço senha, porque agora eu estou buscando outro campo, é igual document, não preciso de escrever tudo, posso ir com a setinha enter ponto, get element by ID, abro parentes, abro aspas, coloco que eu copiei que é o ID do elemento que eu quero, fecho aspas, fecho parentes, clico no enter, a mesma coisa aqui, eu coloco senha ponto velo e enter, ele me fala que não tem nenhum valor atribuído para esse campo no momento, se eu colocar aqui 1, 2, 3, 4, 5, 6, ele vai preencher o campo com 1, 2, 3, 4, 5, 6, beleza? Vamos para o segundo, por ter que ser o campo, que é o campo do órgão, onde está selecionado Cplug, eu vou criar uma variável aqui, vou ver o primeiro órgão aqui, AG, você para simular a seleção da opção AG, então eu vou criar uma variável aqui, órgão selecão igual AG, beleza? Do mesmo jeito, ele já me, para a gente ter certeza que ele entendeu o que eu estou querendo, vou passar aqui no Element, para a gente pegar o ID daquela, pelo visto a VPN parou de funcionar de novo, vamos ter um pouquinho de paciência, tomar uma água aqui, a boca já está seca, você também já estava cansado, toma sua aguinha aí, voltemos, vamos fazer tudo de novo, é bom que você pratica, ponho aqui no Elements, seleciono aqui a opção para fazer o filtro, ponho no campo que eu quero, dois cliques no valor do AG, CTRL C, vou voltar no console, se eu clicar aqui em CTRL L, ele só limpa, mas eu não perco as variáveis que eu criei, ele só perde se você der um F5 com atualizar o famoso refresh na página, você não vai fazer isso, por favor, e aí a gente vai criar outra variável, que é a variável órgão, eu criei inicialmente o órgão seleção, agora eu vou criar só órgão que é a variável que vai selecionar o que eu preciso, qual que é o, como que eu faço isso, document, document.getElementByID, aparentes, abro chaves, CTRL V, peço chaves, peço parentes, digito enter. Aqui a gente tem já uma diferença para os outros campos, eu não tenho aqui um campo só, eu tenho vários, então quando eu abro ele aqui, ele me fala que a gente tem várias opções, então se eu quero selecionar a AGE, eu tenho que chegar no campo AGE, como que eu vou fazer isso, presta atenção, vou fechar aqui, vou mostrar algumas maneiras, órgão na posição zero é a opção basia, órgão na posição um, AGE, é a que eu preciso, órgão na posição dois, é a ARIMBH, e assim sucessivamente, o que que eu estou querendo dizer com isso, nós temos aqui uma lista de opções para serem selecionadas, como que eu vou selecionar, se eu já soubesse que a minha opção era AGE, eu poderia fazer o seguinte, órgão na posição um que é AGE ponto selected igual a TRUE, com a letra minúscula, estou habituada a escrever no Python que a letra maiúscula, mas aqui a letra minúscula, DOM ENTER, olha o que que aconteceu, ele foi para a opção que eu queria, porque vamos recapitular, a variável que eu criei, órgão, ele é a lista de opções a serem selecionadas, como que eu acesso cada uma delas usando essa notação aqui, sendo que aqui dentro eu tenho que colocar o INDEX ou a posição da opção que eu preciso, no meu caso é a posição um, beleza? Se eu precisasse, por exemplo, do BDMG, então um, dois, três, quatro, cinco, seria a opção cinco, ponto selected igual a TRUE, com a letra minúscula, estou fazendo errado de novo, olha, ele já mudou lá, beleza? Você vai saber, todos os, todas as vezes, qual que é o órgão, qual que é o INDEX, aquele zero, um, dois, três, do seu órgão? Não, você não vai saber, então você vai ter que usar uma estrutura de repetição para conferir órgão por órgão, na hora que ele identificar que o texto do órgão é o que você quer, você seleciona o valor, acho que colocar na prática fica melhor, vamos lá, qual que é o órgão cinco ponto, ponto INERTEXT INER, HTML ou INERTEXT vai dar na mesma aqui, vamos usar o INERTEXT, é o BDMG, então tá, então a gente já tem duas informações que eu tenho que criar uma estrutura de repetição e procurar um INERTEXT que seja igual ao meu órgão seleção, que é a GE, beleza? Como que nós vamos fazer uma estrutura de repetição? Vou limpar aqui, contra o L, tudo que a gente fez não está perdido a menos que você aperte o F5, não faça isso, ou então aqui né, é que você consegue também dar um refresh na página, não faça isso, senão você vai perder tudo, você vai ter que fazer a construção, tudo de novo, 23 minutos de vídeo já, até agora não, isso, sabe o que eu falei 23, toma água aí, fica triste não, ela vai voltar, agora ela voltou né, não sei, ó, já tá na tentativa 3, se ela chegar na 5 pausa o vídeo, desconecta e vai dar trabalho só pra mim, você vai dar trabalho só de esperar um pouquinho, bom, foi isso mesmo que ela fez, né, então já tô voltando, não demorou muito, estamos de volta, vamos lá, tomou sua água, se precisou tomar um café também, mas agora a gente já tem tudo que a gente precisa para fazer, que uma estrutura de repetição usando o FOR, então na hora que você tiver aqui ó, FOR, ele já vai te dar aqui ó, a primeira opção, você vai, certinha pra baixo, ENTER, porque ele já vai te dar todas as opções que você precisa para preencher o seu loop, tá, e aí você vai fazer o seguinte, o seu index vai começar no zero, porque a gente viu que o ORRO na posição zero é a primeira você vai acrescentar nesse index um, toda vez que você fizer uma rodada de verificação, e aí você vai, a sua rodada ela vai acontecer toda vez que seu index for menor que o tamanho da lista, o tamanho do número de opções, como que você busca o tamanho do número de opções? Uma função que chama LENF, passando para ela, aliás, é ORGAM, agora eu esqueci, é LENF, é ORGAM SELEÇÃO, vamos ver se vai dar certo, vou mandar printar aqui ó, só para a gente ver se vai dar certo, que é o console.log, apertei ENTER, ele saiu, certinha pra cima, ele volta o que eu tava digitando, o que que eu quero aqui, printar o ORGAM na posição index.inertext você veja que ele não me deu a dica, eu provavelmente tô escrevendo alguma coisa errada aqui, vamos ver se isso vai funcionar, não funcionou, LENF is not a function, ah, tô usando a estrutura errada aqui, porque é ORGAM SELEÇÃO, ponto LENF, eu usei errado, ok, vamos ver se eu vou receber a dica, então o ORGAM na posição do index, ponto INERText, ele continua, não me dando dica, o que que eu tô fazendo errada aqui ó, UNEXPECT TOKEN, AN AN AN Y, vamos fazer melhor, control L, vou voltar aqui, vou deixar só o ORGAM, console.log ENTER, tá falando que eu não coloquei, ah tá, coloquei um, tem que tomar cuidado com essas coisas, mas eu coloquei aqui um setinha pra cima, o LENF aqui, eu tiro, esse parênteses fechado, ó, pronto, então agora ele trouxe, você vê que ele entrou, ele foi entrando e foi printando um por um, control L pra limpar, vamos melhorar isso aqui, agora sim eu consigo usar ponto INERText, ó, ele trouxe todos, beleza? Não, mentira, ele trouxe um só, por que que ele trouxe um só? Vamos usar aqui o INERTHTML undefined, por que que o ORGAM control L pra limpar, por que que o ORGAM, na posição 3, lá vai a VPN me avacaiar de novo, oh gente, tá fácil não, agora foi, ponto INERText deu na posição 4, vai, tá dando, então é INERText mesmo, ENTER, beleza, tá estranho que ele não tá trazendo todas, ele tá trazendo um só e ele tá dando undefined, INDEX, não gente, tá errado isso aqui, enquanto o INDEX for maior, não, tá menor, tá certo, mais um, ORGAMseleção, ponto LENF3, ORGAMseleção, ah eu usei a variável errada, gente, é ORGAM, mil desculpas, vamos fazer aqui de novo, então enquanto ORGAM ponto LENF, agora traz, oh, tá vendo que uma coisinha que você faz errado, ele te atrapalha todo, em vez de eu usar a variável correta, que é a variável onde a gente selecionou a TAG, eu usei a variável ali no loop, que é a variável que eu registrei a minha opção desejada, vamos trazer aqui, oh, INERText, agora sim ele vai trazer tudo, e aí agora eu vou colocar dentro disso aqui um acondicional, que vai ser o seguinte, exclui isso aqui, oh, IF, aí você também seleciona, setinha pra baixo ENTER, IF o ORGAM na posição INDEX, você não pode dar ENTER não, for igual, igual o ORGAMSELEÇÃO, e aí é o ORGAM na posição INDEX, ponto INERText, o que que você vai fazer? Caso ele, na hora da conferência, ele veja que o ORGAM da, da, da, que eu to conferindo agora, seja igual da seleção, ele vai selecionar ele, então ele vai fazer o ORGAM na posição INDEX, ponto SELECTANT, SELECTANT, igual a TRUE, vamos ver se vai dar certo, ele tem que selecionar a AGES, não me engano, a AGES, o que que ele fez? Ele iterou em todos os elementos da lista, até chegar no AGES, a hora que ele chega no AGES, ele seleciona ele e, e para, vamos fazer outro ORGAM aqui pra você ver, ó, ORGAMSELEÇÃO, igual, igual, igual a CPLUG, então agora, duas setinhas para cima, ele traz o meu código todo, eu clico em ENTER e aí ele seleciona a CPLUG, eu vou fazer de novo aqui, ó, com uma diferença, vou voltar para AGES, control L para limpar, botar a estrutura de repetição, ele selecionou AGES, ORGAMSELEÇÃO, vou voltar para CPLUG e agora, na estrutura, na hora que ele, aqui, ó, eu vou dar um console ponto LOG, só para vocês verem que ele está entrando em uma, em todas as opções, até CPLUG e aí, é o ORGAM na posição INDEX ponto INNERTEXT, vamos ver se vai dar, ó, aqui, o que eu posso fazer, é botar também um console ponto LOG, selecionei, selecionei, vamos ver o que vai dar, ó, ele possui a PLUG, ele selecionou e ficou por todas as outras, eu poderia parar o loop assim, ó, deixa eu pesquisar aqui, control L, eu poderia aqui, ó, não é Q, STOP, ou seja, ele não vai passar em todos os itens, não, ele passou, estou sabendo de nada, em, beleza, mas é isso, nós já temos aqui as nossas opções, como que eu clico no botão, né, então a gente já viu como preencher o valor, como selecionar, como que eu clicaria em um botão, vamos fazer a mesma coisa, ó, vou passar aqui, acessar, é uma tag button, é, o ID dela é acessar, então vou dar dois cliques aqui, control C, console, control L pra limpar, botão é igual, botão sem sentido, viu gente, é, documento, vou fazer um pouquinho mais rápido, ponto, get elemento by ID, vou passar na, aquilo que eu copiei, botão, ponto, clique, então selecionei e ele tem uma opção que chama clique, na hora que eu, e aí por ser uma função, né, uma ação que você vai fazer, você tem que usar os parentes, na hora que eu der enter, ele vai clicar e aí ele vai falar, sem o usuário não informado, na verdade está errado, a gente tinha que ter falado como e que assim está errado, mas tudo bem, vamos, vamos fazer de novo aqui, ó, um, dois, três, quatro, cinco, seis, vou colocar na munheca, ponto, clique, botão is not defined, ah, bom, até dado isso, porque quando ele clicou no botão ele deu um refresh na página, então o meu, a minha variável botão não existe mais, eu vou ter que clicar, criá-la de novo, documento, ponto, get elemento by ID, refresh parentes, abre aspas, alá, beleza, botão, ponto, clique, enter, aí ó, usuário ou senha inválida, aquela hora a senha devia ter apagado por algum motivo, ou seja, a gente aprendeu a selecionar a tag usando ID, a gente aprendeu a preencher os campos usando as opções de velo e de selected, no caso de um, de uma tag de seleção, a gente aprendeu a clicar no botão do formulário, como que eu jogo isso tudo para o Power Automate, vamos fazer aqui pra concluir a nossa, o nosso aprendizado, vou criar um novo fluxo, vou chamar ele de mostrando Java, Java script, tá pequenininho, mas eu acho que vai dar pra entender, ele já vai preparar aqui tudo pra gente, uma água aí gente, tá muito quente, ó, qual ação que eu vou usar, abrir, iniciar no novo cron, clique arrasta, qual é o, a URL cimg.br até apagar aqui, ó, beleza, então, iniciar uma nova instância, a URL, vou pedir pra ele iniciar maximizado, e vou chamar essa instância de save, pra ficar mais fácil da gente achar isso no futuro, beleza, agora que vem elas, Java script, executar a função Java script na página da web, ok, apaga tudo isso que tá aqui, ó, mas os parentes tem que ficar, beleza, então, vamos escrever, vamos escrever na tela, copiar e colar, ó, vai ficar mais fácil, vou fazer tudo novo aqui, até bom que vocês praticam, qual que é esse elemento do usuário, text usuário, Ctrl C, console, usuário, é igual o documento, ponto getElementById, ok, é, isso aqui, vou copiar lá no Power Automate, e aí, eu falo que o usuário, o usuário é igual a Gabriel, você pode colocar aqui o valor que você quiser, beleza, escrevi errado, Gabriel, ótimo, é, variável produzida, eu vou desmarcar, gente, não precisa, ok, vou copiar e colar, Ctrl C, Ctrl V, porque agora eu vou criar a variável da senha, que ela é igual, ah, eu descobri que eu fiz um trem errado aqui, ó, o usuário, ponto velui, né, velui, ok, qual que é a senha mesmo, vamos passar aqui de novo, PWD senha, Ctrl C, PWD senha, só substituir aqui, e eu vou colocar ela como um, dois, três, quatro, cinco, você coloca o valor que você quiser, salvo, salvo aqui, vai fazendo, vai salvando, e executa, ó, abriu, pois Gabriel, não pôs senha, fiz alguma coisa errada lá na senha, e eu já sei o que que é, eu não mudei o não das variáveis aqui, ó, guiatelinha do ar de PWD senha, não, isso tem nada a ver, não, ah, tá, já vou aproveitar pra corrigir, ó, senha, senha, ponto velui, se não colocar o ponto velui, ele não vai saber o que que é pra fazer, fecho essa página que ele abriu, salvo, executa de novo, Gabriel senha, show de bola, você poderia ter colocado tudo numa mesma ação, eu tô colocando em duas só pra simplificar a vida, beleza? A terceira é o nosso JavaScript que eu vou pegar aqui da página, que foi, vou dando setinha pra cima até achar, é esse aqui, vou tirar esse stop aqui, vou tirar esse console ponto log daqui, então ele vai fazer interação, vou ter que criar uma variável chamado organ, então control c, copiei esse for, mais uma aqui, executar JavaScript, apago tudo que tá de verde, enter, enter, entre, control v, eu tenho que falar com ele o que que é o organ, e aí eu volto na página da web pra pegar, então o organ, na verdade eu vou fazer o seguinte, o mouse aqui, só pra gente pegar o cell organ que é o id, organ é igual o documento, ponto get element by id, control v, enter, então eu tenho que julgar essa variável lá pra ele saber o que que é o meu organ, ok? Control c, jogo antes do loop, que essa informação precisa do loop, e eu tenho que passar aqui pra ele qual que é o organ selecão, como ele tá, vamos colocar a ger, beleza, vamos ver se vai funcionar, salvo, peço aqui, como ele tá selecionado ali na cplug, a gente vai ver se vai funcionar, ele tá lá na cplug, selecionou a ger, última coisa vai ser a seleção do nosso botão, botão ele já perdeu aqui também né, até bom que a gente faz de novo, vamos praticando acessar que é o id, então o botão é igual, documento, ponto get element, o que você já não tá escrevendo esse direto lá no automating, porque ele me ajuda, e aí eu sei que eu não tô escrevendo nada errado, control v, selecão né, acessando, já é escrever errado, fecho, então o botão é isso, control c, vou criar um outro aqui né, eu preciso só do botão, botão, ponto click, fecho parênteses, lógico tá errada a minha senha, mas já dá pra testar, não vou fechar esse aqui, não, vou executar, não se esqueçam de ir salvando o seu fluxo, e ele clicou, que ele falou sem é do usuário não informar, quase uma hora de vídeo, mas eu ainda vou mostrar uma coisa pra vocês interessante, que aí não tem a ver com html, javascript, nada disso, são as variáveis de entrada aqui no automating, porque eu não gosto de escrever, por exemplo, o valor aqui, usuário sem essa informação insensível, isso com a melhor prática, escrever aqui, variável de entrada, então vou criar a variável de entrada usuário, vou pôr o valor dela, vou pôr aqui gabriel, e vou marcar como confidencial, porque quem tiver olhando aí o seu fluxo vai ver que a variável é confidencial, e portanto, além de que quando você copie qual é esse fluxo, ele não passa esse valor pra frente, variável de entrada, vou criar o outro que eu tô chamando de senha, 1, 2, 3, 4, e eu vou marcar ela como confidencial, ok, vou substituir esses valores aqui, então em vez de eu ter uma senha hard code, eu vou passar aqui a senha, eu tenho que colocar aspas do mesmo jeito, tá bom? Mesma coisa aqui pro meu usuário, então eu vou tirar o meu gabriel hard code aqui, e vou selecionar o meu usuário passando as aspas, tá pequenininho, né só, acho que tá dando pra ver, salvo, salvo e executo, ok, vamos colocar aqui esse órgão seleção também numa variável, entrada, órgão, selecão, vamos passar plug, salvar, eu não preciso ser confidencial, posso marcar como confidencial, né, ok, salvo, e eu vou fechar essas guias que estão abertas, vou salvar aqui muito importante, ir salvando, vou pedir pra executar, ele não marco, ah, porque que ele não marco, né, porque eu não troquei aqui, ó, então aqui, órgão seleção tem que ser igual, entre aspas, há variável que eu criei, órgão seleção, esse valor eu não preciso, vamos fazer aqui, vamos melhorar o nosso código, esse valor da variável também não preciso, só a instância do SEI que vai ficar aberta ali, vou salvar, executar, esse é plug acessor, temos um mega robô funcionando para fazer login do SEI sem maiores dificuldades, digamos assim, pra enviar, pra clicar e por aí vai.

meadapt / meadapt.com