Cypress IO logowanie do aplikacji – to krótki wpis pomagający Wam możliwości zalogowania do aplikacji za pośrednictwem Cypressa. W przypadku rozwoju – będziemy poszerzać wpis o kolejne możliwości.
Instalacja
Są dwie metody instalacji Cypressa. Wybór metody należy oczywiście do użytkownika. Pierwsza poprzez użycie npma, drugi zaś poprzez pobranie i rozpakowanie pliku zip. W przypadku npma – zainstaluj Node JS.
nmp
Przejdź do swojego projektu i zainstaluj cypressa poprzez polecenie:
npm install cypress --save-dev
Po instalacji w folderze projektu pojawi się katalog o nazwie node_modules oraz plik package-lock.json.Uruchomienie Cypressa jest niezwykle proste, gdyż wystarczy wpisać komendę: node_modules\\.bin\cypress open. Jeżeli chcesz, poniżej oficjalny tutorial ze strony cypress.io
plik zip
Możesz pobrać plik spakowany w formacie zipa np. tutaj pobierz i wypakować w dowolnym miejscu by przetestować – zapoznać się z narzędziem. Nie polecam jednak tego rozwiązania.
Logowanie do aplikacji
Standardowe logowanie do aplikacji za pośrednictwem username i passworda możemy wykonać prosto jak wszystkie inne czynności w ramach testach Cypressa.
// Fill the username
cy.get('[data-cy="username"]')
.type('login')
.should('have.value', 'login');
// Fill the password
cy.get('[data-cy="password"]')
.type('123$567')
.should('have.value', '123$567');
// Locate and submit the form
cy.get('login-form').submit();
Wybierając właściwe selectory możemy zalogować się do aplikacji w prosty i szybki sposób. Oczywiście gdy będziemy chcieli korzystać z takich testów warto aby dane do logowania nie były wprost wpisane w kodzie.
Auth0
Jeżeli mam konieczność autentyfikacji, aby dostać się do naszej aplikacji webowej konieczne jest skorzystanie z takiego wariantu.
Amazon Cognito Authentication
Jeżeli testy naszej są powiązane z usługami Amazona, konieczne jest również umieszczenie tego w naszych testach automatycznych tak aby wszystko działało poprawnie.
Amplify.configure({
Auth: {
identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX', // Amazon Cognito Identity Pool ID
region: 'XX-XXXX-X', // Amazon Cognito Region
},
})a
Dane oczywiście trzeba sobie ustawiić w credentials w Cypressie:
const awsConfig = require(path.join(__dirname, '../../aws-exports-es5.js'))
dotenv.config()
export default (on, config) => {
// ...
config.env.cognito_username = process.env.AWS_COGNITO_USERNAME
config.env.cognito_password = process.env.AWS_COGNITO_PASSWORD
config.env.awsConfig = awsConfig.default
// plugins code ...
return config
}
Całość procesu tworzenia tego logowania zawarta jest w dokumentacji.
Inne rodzaje:
Cypress posiada też możliwości Autentyfikacji na inne sposoby, które mogą Was zainteresować przy tworzeniu Waszych testów automatycznych:
Tworzenie pliku env
Jak wcześniej wspomnieliśmy warto nasze dane umieścić w innym pliku tak aby nie były dostępne bezpośrednio z kodu. Przykładem może być stworzenie pliku cypress.env.json, gdzie umieścimy dane. Pamiętać jednak należy, by plik ten wpisać do .gitignore.
{
"auth_audience": "https://mojastrona.com/api/v2/",
"auth_url": "https://mojastrona.com/oauth/token",
"auth_client_id": "my_client_id",
"auth_client_secret": "my_client_secret",
"auth_username": "my_username",
"auth_password": "my_password"
}
Podsumowanie
Cypress IO logowanie do aplikacji 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.
