Cypress IO logowanie do aplikacji

Cypress IO

 1,094 

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.

Cypress IO logowanie do aplikacji - fake login

// 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.

cy.visit(’https://naszafejkowastrona.pl’, {
    auth: {
      username: 'admin’,
      password: 'admin123′
    }
  })

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.