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.
