-
-
Notifications
You must be signed in to change notification settings - Fork 267
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat e2e convert to pw suite coinmarket #16065
Changes from 8 commits
7cc0f23
00aaffa
f263ec1
3601439
407409c
9ead4d4
65e1c63
eb3f255
1fa1f97
d75965a
599da41
f3770d8
5c42fbd
237c759
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,19 +27,25 @@ const config: PlaywrightTestConfig = { | |
testDir: 'tests', | ||
workers: 1, // to disable parallelism between test files | ||
use: { | ||
viewport: { width: 1280, height: 720 }, | ||
headless: process.env.HEADLESS === 'true', | ||
trace: 'on', | ||
video: 'on', | ||
screenshot: 'on', | ||
testIdAttribute: 'data-testid', | ||
actionTimeout: 30000, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I had some issue with traces and fails. Once I removed this forced timeout, it got fixed. Every action has its default timeout. So I suggest lets leave it to carefully chosen defaults by the playwright devs. |
||
}, | ||
reportSlowTests: null, | ||
reporter: process.env.GITHUB_ACTION | ||
? [['list'], ['@currents/playwright'], ['html', { open: 'never' }]] | ||
: [['list'], ['html', { open: 'never' }]], | ||
timeout: process.env.GITHUB_ACTION ? timeoutCIRun : timeoutLocalRun, | ||
outputDir: path.join(__dirname, 'test-results'), | ||
snapshotPathTemplate: 'snapshots/{projectName}/{testFilePath}/{arg}{ext}', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By default snapshots are stored in folder with test file. Which can lead to cluttered test folders. So this configuration puts snapshot to their own Folder. |
||
expect: { | ||
toHaveScreenshot: { | ||
maxDiffPixelRatio: 0.025, | ||
}, | ||
}, | ||
}; | ||
|
||
// eslint-disable-next-line import/no-default-export | ||
|
Vere-Grey marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I am not sure whether the receiving address will stay same all the time :/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import { Locator, Page, expect } from '@playwright/test'; | ||
|
||
import { TrezorUserEnvLink } from '@trezor/trezor-user-env-link'; | ||
|
||
import { WalletActions } from './walletActions'; | ||
|
||
export class MarketActions { | ||
readonly offerSpinner: Locator; | ||
readonly layout: Locator; | ||
readonly form: Locator; | ||
readonly bestOfferProvider: Locator; | ||
readonly bestOfferAmount: Locator; | ||
readonly buyBestOfferButton: Locator; | ||
readonly youPayInput: Locator; | ||
readonly buyOffersPage: Locator; | ||
readonly compareButton: Locator; | ||
readonly quotes: Locator; | ||
readonly quoteOfProvider = (provider: string) => | ||
this.page.getByTestId(`@coinmarket/offers/quote-${provider}`); | ||
readonly quoteProvider: Locator; | ||
readonly quoteAmount: Locator; | ||
readonly selectThisQuoteButton: Locator; | ||
readonly modal: Locator; | ||
readonly buyTermsConfirmButton: Locator; | ||
readonly confirmOnTrezorButton: Locator; | ||
readonly confirmOnDevicePrompt: Locator; | ||
readonly tradeConfirmation: Locator; | ||
readonly tradeConfirmationCryptoAmount: Locator; | ||
readonly tradeConfirmationProvider: Locator; | ||
readonly tradeConfirmationContinueButton: Locator; | ||
|
||
constructor(private page: Page) { | ||
this.offerSpinner = this.page.getByTestId('@coinmarket/offers/loading-spinner'); | ||
this.layout = this.page.getByTestId('@coinmarket'); | ||
this.form = this.page.getByTestId('@coinmarket/form'); | ||
this.bestOfferProvider = this.page.getByTestId('@coinmarket/offers/quote/provider'); | ||
this.bestOfferAmount = this.page.getByTestId('@coinmarket/form/offer/crypto-amount'); | ||
this.buyBestOfferButton = this.page.getByTestId('@coinmarket/form/buy-button'); | ||
this.youPayInput = this.page.getByTestId('@coinmarket/form/fiat-input'); | ||
this.buyOffersPage = this.page.getByTestId('@coinmarket/buy-offers'); | ||
this.compareButton = this.page.getByTestId('@coinmarket/form/compare-button'); | ||
this.quotes = this.page.getByTestId('@coinmarket/offers/quote'); | ||
this.quoteProvider = this.page.getByTestId('@coinmarket/offers/quote/provider'); | ||
this.quoteAmount = this.page.getByTestId('@coinmarket/offers/quote/crypto-amount'); | ||
this.selectThisQuoteButton = this.page.getByTestId( | ||
'@coinmarket/offers/get-this-deal-button', | ||
); | ||
this.modal = this.page.getByTestId('@modal'); | ||
this.buyTermsConfirmButton = this.page.getByTestId( | ||
'@coinmarket/buy/offers/buy-terms-confirm-button', | ||
); | ||
this.confirmOnTrezorButton = this.page.getByTestId( | ||
'@coinmarket/offer/confirm-on-trezor-button', | ||
); | ||
this.confirmOnDevicePrompt = this.page.getByTestId('@prompts/confirm-on-device'); | ||
this.tradeConfirmation = this.page.getByTestId('@coinmarket/selected-offer'); | ||
this.tradeConfirmationCryptoAmount = this.page.getByTestId( | ||
'@coinmarket/form/info/crypto-amount', | ||
); | ||
this.tradeConfirmationProvider = this.page.getByTestId('@coinmarket/form/info/provider'); | ||
this.tradeConfirmationContinueButton = this.page.getByTestId( | ||
'@coinmarket/offer/continue-transaction-button', | ||
); | ||
} | ||
|
||
openCoinMarket = async () => { | ||
const walletPage = new WalletActions(this.page); | ||
Vere-Grey marked this conversation as resolved.
Show resolved
Hide resolved
|
||
await walletPage.accountMenuButton.click(); | ||
//TODO: #16073 We cannot set resolution for Electron. on CI button is hidden under dropdown due to a breakpoint | ||
const isBuyButtonHidden = !(await walletPage.coinMarketBuyButton.isVisible()); | ||
if (isBuyButtonHidden) { | ||
await walletPage.walletExtraDropDown.click(); | ||
await walletPage.coinMarketDropdownBuyButton.click(); | ||
} else { | ||
await walletPage.coinMarketBuyButton.click(); | ||
} | ||
}; | ||
|
||
waitForOffersSyncToFinish = async () => { | ||
await expect(this.offerSpinner).toBeHidden({ timeout: 30000 }); | ||
}; | ||
|
||
setYouPayAmount = async (amount: string) => { | ||
//Warning: the field is initialized empty and gets default value after the first offer sync | ||
await expect(this.youPayInput).not.toHaveValue(''); | ||
await this.waitForOffersSyncToFinish(); | ||
await this.youPayInput.fill(amount); | ||
//Warning: Bug #16054, as a workaround we wait for offer sync after setting the amount | ||
await this.waitForOffersSyncToFinish(); | ||
}; | ||
|
||
confirmTrade = async () => { | ||
await expect(this.modal).toBeVisible(); | ||
await this.buyTermsConfirmButton.click(); | ||
await this.confirmOnTrezorButton.click(); | ||
await expect(this.confirmOnDevicePrompt).toBeVisible(); | ||
await TrezorUserEnvLink.pressYes(); | ||
await expect(this.confirmOnDevicePrompt).not.toBeVisible(); | ||
}; | ||
|
||
readBestOfferValues = async () => { | ||
const amount = await this.bestOfferAmount.textContent(); | ||
const provider = await this.bestOfferProvider.textContent(); | ||
if (!amount || !provider) { | ||
throw new Error( | ||
`Test was not able to extract amount or provider from the page. Amount: ${amount}, Provider: ${provider}`, | ||
); | ||
} | ||
|
||
return { amount, provider }; | ||
}; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { test, expect } from '../../support/fixtures'; | ||
|
||
const regexpBtcValue = /^\d+(\.\d+)? BTC$/; | ||
|
||
test.describe('Coin market buy', { tag: ['@group=other'] }, () => { | ||
test.use({ emulatorStartConf: { wipe: true } }); | ||
test.beforeEach(async ({ onboardingPage, dashboardPage, marketPage }) => { | ||
await onboardingPage.completeOnboarding(); | ||
await dashboardPage.discoveryShouldFinish(); | ||
await marketPage.openCoinMarket(); | ||
}); | ||
|
||
test('Buy crypto from compared offers', async ({ marketPage }) => { | ||
await test.step('Fill input amount and opens offer comparison', async () => { | ||
await marketPage.setYouPayAmount('500'); | ||
await expect(marketPage.layout).toHaveScreenshot('buy-coins-layout.png', { | ||
mask: [marketPage.bestOfferAmount, marketPage.bestOfferProvider], | ||
}); | ||
await marketPage.compareButton.click(); | ||
}); | ||
|
||
await test.step('Check offers and chooses the first one', async () => { | ||
// TOOD: #16041 Once solved, add verification of offer compare items | ||
await expect(marketPage.buyOffersPage).toBeVisible(); | ||
expect(await marketPage.quotes.count()).toBeGreaterThan(1); | ||
await marketPage.selectThisQuoteButton.first().click(); | ||
}); | ||
|
||
await test.step('Confirm trade and verifies confirmation summary', async () => { | ||
await marketPage.confirmTrade(); | ||
await expect(marketPage.tradeConfirmation).toHaveScreenshot( | ||
'compared-offers-buy-confirmation.png', | ||
{ | ||
mask: [ | ||
marketPage.tradeConfirmationCryptoAmount, | ||
marketPage.tradeConfirmationProvider, | ||
], | ||
}, | ||
); | ||
// TOOD: #16041 Once solved, Assert mocked price | ||
await expect(marketPage.tradeConfirmationCryptoAmount).toHaveText(regexpBtcValue); | ||
}); | ||
await expect(marketPage.tradeConfirmationContinueButton).toBeEnabled(); | ||
}); | ||
|
||
test('Buy crypto from best offer', async ({ marketPage }) => { | ||
await marketPage.setYouPayAmount('500'); | ||
const { amount, provider } = await marketPage.readBestOfferValues(); | ||
await marketPage.buyBestOfferButton.click(); | ||
await marketPage.confirmTrade(); | ||
await expect(marketPage.tradeConfirmation).toHaveScreenshot( | ||
'best-offer-buy-confirmation.png', | ||
{ | ||
mask: [ | ||
marketPage.tradeConfirmationCryptoAmount, | ||
marketPage.tradeConfirmationProvider, | ||
], | ||
}, | ||
); | ||
await expect(marketPage.tradeConfirmationCryptoAmount).toHaveText(amount); | ||
await expect(marketPage.tradeConfirmationProvider).toHaveText(provider); | ||
await expect(marketPage.tradeConfirmationContinueButton).toBeEnabled(); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Configures the Web tests to be run as nightly. Copied from desktop pipeline