Cypress dodawanie plików w testach

Cypress IO

 1,322 

Cypress dodawanie plików w testach – to wpis pokazujący w jaki sposób w kilku krótkich krokach dodawać pliki w naszych testach automatycznych, tak aby zweryfikować tą funkcjonalność testami automatycznymi. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa, możesz mieć okazję zmierzyć się z koniecznością dodawania plików i weryfikację – czy możemy dodawać jakieś pliki. Ponadto czy np. działa walidacja – tj. dodawanie plików tylko z konkretnym rozszerzeniem w naszej aplikacji. Oczywiście nie chcemy tego sprawdzać manualnie – zatem skorzystajmy z automatyzacji.

Zewnętrzna paczka

Aby umożliwić za pośrednictwem Cypressa dodawania zewnętrznych plików w ramach testów – konieczne jest dodanie paczki cypress-file-upload.  Dodanie tej paczki i szybka konfiguracja pozwoli Wam skorzystanie z tej możliwości.

Konfiguracja

Dodaj paczkę w naszym projekcie testowym poprzez wpisanie w terminalu:

npm install --save-dev cypress-file-upload

Drugim krokiem jest czy Twój projekt jest stworzony w TS czy JS. W przypadku TSa wejdź do tsconfig.json i dodaj:

"compilerOptions": {
  "types": ["cypress", "cypress-file-upload"]
}

W przypadku korzystania z JSa udaj się to lokalizacji cypress/support/commands.js a następnie dodaj tam:

import 'cypress-file-upload';

Ponadto upewni się, że w lokalizacji cypress/support/index.js masz odkomentowany wpis:

import './commands';

Praktyczne dodawanie w teście

Tutaj wszystko zależy w jaki sposób chcemy dodawać nasze pliki. W przypadku gdy musimy kliknąć na przycisk. Wówczas wystarczy skorzystać:

cy.xpath("/descendant::input[contains(@type, 'file')]")
      .attachFile(yourFixturePath)

lub

cy.get('[data-cy="file-input"]')
  .attachFile('myfixture.json');

Bardzo ważnym aspektem jest aby selector posiadał „input”, gdyż tworząc customowy, możemy bez tego elementu mieć problemy z dodawaniem plików.

Istnieje też możliwość skorzystania z opcji drag and drop w teście poprzez:

cy.get('[data-cy="dropzone"]')
  .attachFile('myfixture.json', { subjectType: 'drag-n-drop' });

Ponadto możemy dodać kilka plików:

cy.get('[data-cy="file-input"]')
  .attachFile(['myfixture1.json', 'myfixture2.json']);

Gdzie przechowywać pliki

Domyślnie aplikacja szuka plików w katalogu cypress/fixtures i tam należy je umieszczać. W przypadku gdybyśmy chcieli  dodawać pliki z innej lokalizacji należy podawać ścieżkę.

Dodatki

Mamy możliwość dodawania plików pustych. Wystarczy umieścić tylko odpowiedni skrypt:

cy.get('[data-cy="file-input"]')
  .attachFile({ filePath: 'empty.txt', allowEmpty: true });

Z wykorzystaniem API:

cySubject.attachFile(fixture, processingOpts);

Zastępowanie nazwy pliku:

cy.get('[data-cy="file-input"]')
  .attachFile({ filePath: 'myfixture.json', fileName: 'customFileName.json' });

Podsumowanie

Cypress dodawanie plików w testach – 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.