Skip to content
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.

Sign up for GitHub

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

test: fix flaky e2e #2158

Merged
merged 9 commits into from
Dec 23, 2024
Merged

test: fix flaky e2e #2158

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e38abfd
fix e2e
brtkx Dec 20, 2024
f52ae6b
default timeout
brtkx Dec 20, 2024
c5972d1
Merge branch 'master' into flaky-e2e
brtkx Dec 20, 2024
bfb1b93
fix
brtkx Dec 20, 2024
8017f89
Merge branch 'master' of github.com:OffchainLabs/arbitrum-token-bridg…
brtkx Dec 20, 2024
7929fdc
merge master
brtkx Dec 20, 2024
32efe7f
Merge branch 'master' into flaky-e2e
brtkx Dec 20, 2024
af65c68
rename method
brtkx Dec 23, 2024
b03cf03
Merge branch 'flaky-e2e' of github.com:OffchainLabs/arbitrum-token-br…
brtkx Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/arb-token-bridge-ui/synpress.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,8 @@ export default defineConfig({
},
baseUrl: 'http://localhost:3000',
specPattern: tests,
supportFile: 'tests/support/index.ts'
supportFile: 'tests/support/index.ts',
defaultCommandTimeout: 20_000
Copy link
Contributor Author

@brtkx brtkx Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By default it's set to 4_000. It's not enough given a lot of things are awaited for (e.g. balance changes after transfer etc), so we bump it by a significant amount.

This won't make checks any longer than they are now, only if it fails it will take a bit longer to fail. But it's a good tradeoff to eliminate flakiness.

}
})

Expand Down
4 changes: 2 additions & 2 deletions packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('Approve token for deposit', () => {
timeout: 50000,
interval: 500
})
cy.findMoveFundsButton().click()
cy.startTransfer({ shouldConfirmInMetamask: false })
cy.findByText(/pay a one-time approval fee/).click()
cy.findByRole('button', {
name: /Pay approval fee of/
Expand All @@ -50,7 +50,7 @@ describe('Approve token for deposit', () => {
* If confirm spending fails, test is still considered to be passing by Cypress
* We add another check to make sure the test fails if needed
*/
cy.wait(10_000)
cy.wait(25_000)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Orbit chains may take longer, sometimes the tests fail because they don't have enough time to run

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we only make it 25_000 when it's running for an Orbit chain?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's good to have it for both, I'm only guessing it's for Orbit only as I've observed in the videos. But to be sure I'd leave it for both.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyway, 15 extra seconds doesn't matter because we always wait for withdrawal e2e to finish at the end, they take a bit longer

cy.rejectMetamaskTransaction()
})
})
Expand Down
44 changes: 21 additions & 23 deletions packages/arb-token-bridge-ui/tests/e2e/specs/batchDeposit.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,7 @@ describe('Batch Deposit', () => {
context('deposit should complete successfully', () => {
cy.selectTransactionsPanelTab('settled')

cy.waitUntil(() => cy.findTransactionInTransactionHistory(txData), {
errorMsg: 'Could not find settled ERC20 Batch Deposit transaction',
timeout: 60_000,
interval: 500
})
cy.findTransactionInTransactionHistory(txData)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

waitUntil doesn't work properly here because it needs to return a result. I've moved timeout to the method itself so we always try for 120_000


cy.findTransactionInTransactionHistory({
duration: 'a few seconds ago',
Expand All @@ -156,23 +152,29 @@ describe('Batch Deposit', () => {

context('funds should reach destination account successfully', () => {
// should have more funds on destination chain
cy.findByLabelText(`${ERC20TokenSymbol} balance amount on childChain`)
.invoke('text')
.then(parseFloat)
.should('be.gt', Number(parentErc20Balance))
cy.findByLabelText(`${nativeTokenSymbol} balance amount on childChain`)
.invoke('text')
.then(parseFloat)
.should(
'be.gt',
cy.findByLabelText(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

invoke doesn't follow the retry mechanism, so the default timeout is not respected. With this change we apply the default timeout and fail tests less often.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can also add a { timeout: 10_000 } as the second arg of findByLabelText

Copy link
Contributor Author

@brtkx brtkx Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a default timeout of 20_000 for all commands now. Currently we used synpress's default timeout of 4_000 for all commands. This is not enough and caused some flakiness.

With 20_000 we don't really make the tests longer, they will only fail longer if they do.

`${ERC20TokenSymbol} balance amount on childChain`
).should($el => {
const currentBalance = parseFloat($el.text())
expect(currentBalance).to.be.gt(Number(parentErc20Balance))
})

cy.findByLabelText(
`${nativeTokenSymbol} balance amount on childChain`
).should($el => {
const currentBalance = parseFloat($el.text())
expect(currentBalance).to.be.gt(
Number(parentNativeTokenBalance) + nativeCurrencyAmountToSend
)
})

// the balance on the source chain should not be the same as before
cy.findByLabelText(`${ERC20TokenSymbol} balance amount on parentChain`)
.invoke('text')
.then(parseFloat)
.should('be.lt', Number(parentErc20Balance))
cy.findByLabelText(
`${ERC20TokenSymbol} balance amount on parentChain`
).should($el => {
const currentBalance = parseFloat($el.text())
expect(currentBalance).to.be.lt(Number(parentErc20Balance))
})
})

context('transfer panel amount should be reset', () => {
Expand Down Expand Up @@ -251,11 +253,7 @@ describe('Batch Deposit', () => {
context('deposit should complete successfully', () => {
cy.selectTransactionsPanelTab('settled')

cy.waitUntil(() => cy.findTransactionInTransactionHistory(txData), {
errorMsg: 'Could not find settled ERC20 Batch Deposit transaction',
timeout: 60_000,
interval: 500
})
cy.findTransactionInTransactionHistory(txData)

cy.findTransactionInTransactionHistory({
duration: 'a few seconds ago',
Expand Down
19 changes: 5 additions & 14 deletions packages/arb-token-bridge-ui/tests/e2e/specs/depositERC20.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,20 +150,11 @@ describe('Deposit Token', () => {
// switch to settled transactions
cy.selectTransactionsPanelTab('settled')

//wait for some time for tx to go through and find the new amount in settled transactions
cy.waitUntil(
() =>
cy.findTransactionInTransactionHistory({
duration: 'a few seconds ago',
amount: ERC20AmountToSend,
symbol: testCase.symbol
}),
{
errorMsg: 'Could not find settled ERC20 Deposit transaction',
timeout: 60_000,
interval: 500
}
)
cy.findTransactionInTransactionHistory({
duration: 'a few seconds ago',
amount: ERC20AmountToSend,
symbol: testCase.symbol
})
// open the tx details popup
const txData = {
amount: ERC20AmountToSend,
Expand Down
4 changes: 2 additions & 2 deletions packages/arb-token-bridge-ui/tests/e2e/specs/withdrawERC20.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ describe('Withdraw ERC20 Token', () => {
})

context('should show clickable withdraw button', () => {
cy.findMoveFundsButton().click()
cy.startTransfer({ shouldConfirmInMetamask: false })
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

startTransfer has wait methods to ensure there are no race conditions. For withdrawals we don't want to confirm in metamask popup because we have our dialogs that pop up before that.

})

context('should withdraw successfully', () => {
Expand Down Expand Up @@ -218,7 +218,7 @@ describe('Withdraw ERC20 Token', () => {
})

context('should show clickable withdraw button', () => {
cy.findMoveFundsButton().click()
cy.startTransfer({ shouldConfirmInMetamask: false })
})

context('should initiate withdrawal successfully', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/arb-token-bridge-ui/tests/e2e/specs/withdrawNativeToken.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('Withdraw native token', () => {
ETHToWithdraw = Number((Math.random() * 0.001).toFixed(5)) // generate a new withdrawal amount for each test-run attempt so that findAllByText doesn't stall coz of prev transactions
cy.login({ networkType: 'childChain' })
cy.typeAmount(ETHToWithdraw)
cy.findMoveFundsButton().click()
cy.startTransfer({ shouldConfirmInMetamask: false })
fionnachan marked this conversation as resolved.
Show resolved Hide resolved
cy.findByText(/Arbitrum’s bridge/i).should('be.visible')

// the Continue withdrawal button should be disabled at first
Expand Down Expand Up @@ -146,7 +146,7 @@ describe('Withdraw native token', () => {

cy.typeAmount(ETHToWithdraw)
cy.fillCustomDestinationAddress()
cy.findMoveFundsButton().click()
cy.startTransfer({ shouldConfirmInMetamask: false })
cy.findByText(/Arbitrum’s bridge/i).should('be.visible')

// the Continue withdrawal button should be disabled at first
Expand Down
27 changes: 19 additions & 8 deletions packages/arb-token-bridge-ui/tests/support/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,11 +222,17 @@ export function findMoveFundsButton(): Cypress.Chainable<JQuery<HTMLElement>> {
.should('be.visible')
}

export function startTransfer() {
export function startTransfer({
shouldConfirmInMetamask = true
}: {
shouldConfirmInMetamask?: boolean
} = {}) {
cy.wait(5_000)
cy.findMoveFundsButton().click()
cy.wait(15_000)
cy.confirmMetamaskTransaction()
if (shouldConfirmInMetamask) {
cy.confirmMetamaskTransaction()
}
}

export function findSelectTokenButton(
Expand Down Expand Up @@ -304,6 +310,8 @@ export function findTransactionInTransactionHistory({
amount2?: number
duration?: string
}) {
const timeout = 120_000

// Replace . with \.
const parsedAmount = amount.toString().replace(/\./g, '\\.')

Expand All @@ -313,15 +321,18 @@ export function findTransactionInTransactionHistory({
}`
)

cy.findByTestId(rowId).as('row')
cy.findByTestId(rowId, { timeout }).as('row')
if (duration) {
cy.get('@row').findAllByText(duration).first().should('be.visible')
cy.get('@row', { timeout })
.findAllByText(duration, { timeout })
.first()
.should('be.visible', { timeout })
}

cy.get('@row')
.findByLabelText('Transaction details button')
.should('be.visible')
return cy.get('@row')
cy.get('@row', { timeout })
.findByLabelText('Transaction details button', { timeout })
.should('be.visible', { timeout })
return cy.get('@row', { timeout })
}

export function findClaimButton(
Expand Down
Loading