Cypress News 2023 cz. 3

Cypress News 2023 cz. 3 – to wpis w którym będę przedstawiał Wam newsy związane z narzędziem Cypress. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa może spotkać się z sytuacjami, że będziemy potrzebowali dodatkowego wsparcia by napisać nasze testy. Czasami będzie to spowodowane faktem niemożności obsłużenia w inny sposób danego przypadku, czasami też po prostu skorzystanie z pluginów będzie dla nas łatwiejsze.

Jako Ambasador Cypressa mam na celu rozpowszechnianie wiedzy o tym narzędziu, promowanie wartości jakie nam przyświecają.

Wydanie

Został wydany nowy release pod nr 12.16.0 w ramach której (oraz poprzednich) zostało wprowadzonych kilka rozwiązań. Na Waszą prośbę tym razem uwagi po angielsku (informacje z wersji 15 i 16).

Features:

• Added support for Angular 16.1.0 in Cypress Component Testing. Addresses #27049.

Bugfixes:

• Fixed an issue where certain commands would fail with the error must only be invoked from the spec file or support file when invoked with a large argument. Fixes #27099.

Features:

• Added support for running Cypress tests with Chrome’s new --headless=new flag. Chrome versions 112 and above will now be run in the headless mode that matches the headed browser implementation. Addresses #25972.
• Cypress can now test pages with targeted Content-Security-Policy and Content-Security-Policy-Report-Only header directives by specifying the allow list via the experimentalCspAllowList configuration option. Addresses #1030. Addressed in #26483
• The videoCompression configuration option now accepts both a boolean or a Constant Rate Factor (CRF) number between 1 and 51. The videoCompression default value is still 32 CRF and when videoCompression is set to true the default of 32 CRF will be used. Addresses #26658.
• The Cypress Cloud data shown on the Specs page and Runs page will now reflect Cloud Runs that match the current Git tree if Git is being used. Addresses #26693.

Bugfixes:

• Fixed an issue where video output was not being logged to the console when videoCompression was turned off. Videos will now log to the terminal regardless of the compression value. Addresses #25945.

Dependency Updates:

• Removed @cypress/mocha-teamcity-reporter as this package was no longer being referenced. Addressed in #26938

Pełny changelog tutaj.

Ciekawostka

W ramach witryny Cypress, Gleb Bahmutov stworzył przykłady dla Cypressa, gdzie możemy zmienić widok na dark mode – tutaj.

Dołącz do nas na Discordzie

Cypress udostępnia wszystkim możliwość rozmawiania z Ambassadorami czy twórcami na Discordzie. Jeżeli jesteś zainteresowany i chcesz dołączyć do ponad 8000 sympatyków Cypressa zapraszam tutaj.

Xpath-Cypress

Pomocnik do Cypressa, który pomaga nam w tworzeniu selektorów xpath. Musicie zwrócić uwagę na inne pluginy związane z Cypress i xpath, gdyż zostały one porzucone (@cypress/xpath, oraz cypress-xpath). Wobec tego zapraszam Was do pobrania nowego pluginu. Źródło.

Instalacja narzędzia.

npm install -D xpath_cypress

Import plugina następuje poprzez dodanie cypress/support/e2e.js:

import 'xpath_cypress'
// or
require('xpath_cypress')

cypress-map

Extra Cypress query commands dla Cypressa v12+. Nie będę się rozpisywał gdyż na stronie twórcy jest obszerna instrukcja. Więcej informacji. 

Instalacja narzędzia.

$ npm i -D cypress-map
# lub z Yarn
$ yarn add -D cypress-map

Import plugina następuje poprzez dodanie cypress/support/e2e.js:

import 'cypress-map'

import 'cypress-map/commands/map'
import 'cypress-map/commands/tap'

cypress-mongodb

Jak nazwa sama wskazuje, jeżeli potrzebujemy połączenia Cypressa z bazą mongo. Jeżeli jesteś zainteresowany odwiedź witrynę.

Standardowo instalacja poprzez komendę:

run npm install cypress-mongodb

Konieczna jest konfiguracja cypress.config.js:

{
    module.exports = defineConfig({
        "env": {
            "mongodb": {
                "uri": "mongodb://localhost:27017",
                "database": "database_name",
                "collection": "collection_name"
            }
        }
    });
}

Ponadto pamiętaj o wspieranych wersjach:

Dodatkowo:

Plugin konfigurator – JavaScript

W pliku cypress.config.js dodajemy:

const mongo = require('cypress-mongodb');

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            mongo.configurePlugin(on);
        }
    }
});

Ponadto w cypress/support/e2e.js dodaj:

const mongo = require('cypress-mongodb');
mongo.addCommands();

cypress-clipboard

Kolejny przydatny dodatek który możesz wykorzystać. Zamiast zapisywać poprzez JS dane, możesz skorzystać z tego dodatku, zlokalizowanego tutaj.

Standardowo instalacja

npm install cypress-clipboard;

yarn add cypress-clipboard

Następnie wystarczą proste komendy na wykorzystanie narzędzia:

import 'cypress-clipboard';

cy.get('SOME SELECTOR')
    .invoke('text')
    .copyToClipboard(); 

Następnie ze schowka:

import 'cypress-clipboard';
cy.copyFromClipboard().then(clipboardData => {})

Więcej szczegółów we wpisie na npmjs.com

Ciekawe materiały

1. Integracja GitHuba z Cypress Cloud
2. Component Testing vs React Test Library
3. Integracja Cypressa z MS Teams 
4. Uruchamianie Cypressa z Google Cloud
5. cy.request vs. cy.intercept
6. Nowe wywiady z Ambasadorami Cypressa

Dołącz do społeczności

Jesteście zainteresowani byciem na bieżąco z nowinkami związanymi z Cypressem. Chcesz pogadać z Ambasadorami, twórcami lub innymi fanami Cypressa – dołącz do naszej społeczności na Discordzie już teraz. Jest nas ponad 8000 i społeczność systematycznie rośnie.

Znalazłeś buga?

Masz problem z działaniem frameworka, chcesz zgłosić nam błąd? Dołącz do Githuba i zgłoś błąd lub zaproponuj nam zmiany jako Feature.

Skorzystaj z rozwiązania cloudowego

Cypress posiada rozwiązanie cloudowe które możecie wykorzystywać w swoich projektach – sprawdź już teraz. 

Podsumowanie

Cypress News 2023 cz. 3 – to kolejny wpis mający zachęcić Was do instalacji i sprawdzenia narzędzia. Z racji popularyzacji narzędzia i dużego wsparcia które otrzymał Cypress na rozwój, będziemy poszerzać wpisy na ten temat. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.