CSS mais fácil

Damien Riehl é um advogado especializado em tecnologia e também um músico. E ele não concorda como os processos de violação de direitos autorais, para ele música pode ser vista como matemática. E se você lembrar que há apenas 8 notas musicais, Damien teve a brilhante ideia de fazer um algoritmo que fizesse todas as combinações e colocou no domínio público. Segundo ele, isto pode ajudar naqueles casos em que alguém é processado apenas porque usou uma combinação usada por outro, e a segunda pessoa nem sabia. Veja o faq em http://allthemusic.info/ para entender melhor.

Não sou um advogado, nem estou defendendo a pirataria, o que me chamou a atenção foi a sacada de notar que há um espaço finito de possibilidades. Acho que há um fascinio em poder dizer ‘aqui está tudo sobre o tema X’, pessoalmente foi o que me atraiu no mestrado. Não vou ser arrogante de dizer que sei tudo sobre Design Thinking mas eu abordei meus estudos com este objetivo. E agora sei uma ou duas coisas a respeito …

Outro tema: Pense no design de uma página HTML ou SPA, quantos modos diferentes há de fazê-la? Usamos CSS para controlar o que será exibido. As cores são finitas, vão de #000000 até #FFFFFF; as bordas são top-bottom-left-right; e por aí vai. Adam Wathan notou isto e desenvolveu o TailwindCSS. Com o TailWind, você escreve seu CSS sem sair da sua pagina HTML. Veja a diferença, antes, se eu queria que meu texto fosse azul e negrito, eu faria isto:

style.css

 .info{
        color: blue;
        font-weight: bold;
    }

index.html

<p class="info">
    Lorem Ipsum
</p>

E voilà, texto azul e negrito. O TailWindCSS permite que você escreva diretamente e ele tem uma biblioteca com centenas e centenas de possibilidades. Assim que você usa no seu html ele gera o CSS automaticamente. Este é um detalhe, uma aplicativo roda no seu terminal e varre as suas páginas para saber o que gerar:

index.html

<p class="text-blue font-bold">
    Lorem Ipsum
</p>

ou texto bem grande, negrito, sublinhado, azul-celeste e centralizado na página:

<p class="text-3xl font-bold underline text-sky-400 text-center">
    Lorem Ipsum
</p>

UnoCSS leva a ideia adiante e elimina completamente o arquivo css. No UnoCSS há um script que analisa as suas páginas em runtime e gera as classes para você. E nāo é necessário um aplicativo rodando em background. Mágico! Note que o modo de escrever é exatamente igual ao TailWindCSS.

index.html

<p class="text-blue font-bold">
    Lorem Ipsum
</p>

Tenho usado muito UnoCSS. Mas tenho minhas críticas, o grande número de classes pode tornar o código HTML verboso, e é um fato, seu HTML fica difícil de entender. E o CSS gerado pelo TailWindCSS é legível apenas pelos desenvolvedores do … TailWind 😀.

Além disso, a dependência do framework em classes utilitárias pode levar a uma falta de consistência no design em todo o site, já que diferentes desenvolvedores podem usar classes diferentes para alcançar efeitos semelhantes. E uma vez que não há um arquivo CSS mantido pelo time, a necessidade de documentar as escolhas de estilo é essential.

Ainda assim, a praticidade parece para mim mostrar que frameworks assim serão cada vez mais populares.

Cypress, new kid on the block

Selenium tem sido minha ferramenta de escolha para automação de testes de UI por um bom tempo, e com razão. Ele foi o pioneiro e eu usei muito, mas recentemente tornei-me um fā do Cypress. Eu fiz um curso sobre Cypress (todos os exercícios podem ser encontrados no meu GH), e me convenci completamente de que ele apresenta uma alternativa mais eficiente e confiável.

Ao analisar as diferenças entre Selenium e Cypress, alguns fatores-chave se destacam. Selenium suporta várias linguagens incluindo Java, Python, C#, e outras enquanto Cypress é puramente JavaScript. Isso pode inicialmente parecer limitante, mas considerando que a maioria das aplicações web são agora baseadas em JavaScript, Cypress se torna uma escolha natural. Testes Selenium são executados fora do navegador enquanto Cypress roda diretamente dentro do navegador. Isso permite ao Cypress controlar todo o processo de automação, incluindo tráfego de rede, temporizadores e até mesmo o carregamento do código JavaScript. É este controle interno que promete estabilidade – uma promessa que o Selenium muitas vezes não consegue manter devido à suas dependências externas. A possibilidade de testar sua automação com opções de debugger no navegador é revolucionária, passo muito tempo entendendo meus scripts usando as abas do console, styles e rede, tenho certeza de que os desenvolvedores FE estão muito familiarizados com elas.

Cypress fornece uma API simples e fluida para interagir diretamente com o DOM, dê uma olhada:

describe('DOM Interactions Test', function() {
  it('Fills and submits a form', function() {
    cy.visit('https://www.example.com/form') // Cypress loads the webpage

    cy.get('input[name="firstName"]').type('John') // Cypress finds the input field firstName and types 'John' into it
    cy.get('input[name="lastName"]').type('Doe') // Cypress finds the input field lastName and types 'Doe' into it

    cy.get('button[type="submit"]').click() // Cypress clicks the submit button
  })
})

Compare com Selenium

WebDriver driver = new ChromeDriver();

driver.get("https://www.example.com/form"); // Open URL 

WebElement firstName = driver.findElement(By.name("firstName"));
firstName.sendKeys("John"); // Fill the firstName input

WebElement lastName = driver.findElement(By.name("lastName"));
lastName.sendKeys("Doe"); // Fill the lastName input

WebElement submitButton = driver.findElement(By.tagName("button")); 
submitButton.submit(); // Submit the form

Cypress permite que você interaja com seletores CSS!

Outra grande vantagem do Cypress é sua capacidade de lidar com operações assíncronas muito facilmente.

describe('Asynchronous Handling Test', function() {
  it('Waits for an element to be visible', function() {
    cy.visit('https://www.example.com') // Cypress loads the webpage

    cy.get('#asyncButton', { timeout: 10000 }) // Cypress waits for the element with id 'asyncButton' to become visible for up to 10 seconds
      .should('be.visible') // Asserts that the element should be visible
      .click() // Clicks the button once it's visible
  })
})

Lidar com API’s também é moleza:

describe("Todo List API Interaction", () => {
  // Define the base URL of your API
  const apiUrl = "https://example-api.com";

  beforeEach(() => {
    // Intercept the API call and load a JSON payload for the response
    cy.intercept("GET", `${apiUrl}/todos`, { fixture: "todos.json" }).as("getTodos");
    // Visit the application or a specific page where the API call is made
    cy.visit("/todo-list");
  });

  it("should fetch todos from the API and display them", () => {
    // Perform any actions that trigger the API call (e.g., click a button to fetch todos)
    cy.get("#fetch-todos-btn").click();

    // Wait for the API call to complete and the response to be displayed
    cy.wait("@getTodos");

    // Assert that the correct API endpoint was called and the response was handled properly
    cy.get(".todo-item").should("have.length", 3); // Assuming the response contains 3 todo items
  });
});

O que para mim é o grande atrativo é a minha ressalva: ao interagir a partir dos seletores CSS demanda que você seja cuidadoso ao escolher aqueles que têm menos chance de mudar e quebrar seus testes. Ainda assim, eu pretendo apenas usar Cypress para meus testes de UI.