mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
chore: remove legacy e2e tests (#27421)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The generator migration is complete, so we can safely remove the legacy test infrastructure. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removes the legacy test infrastructure ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Note: There's still a bit of sharding imbalance that I need to look into (test runner 17 is a few minutes longer than all the other test runners), but I will handle that in a separate PR.
This commit is contained in:
Liam DeBeasi
@ -7,8 +7,6 @@ inputs:
|
||||
description: 'Playwright total number of test shards (ex: 4)'
|
||||
update:
|
||||
description: 'Whether or not to update the reference snapshots'
|
||||
commandModifier:
|
||||
description: 'Command modifier to run. This is should only be used to temporarily run legacy E2E tests as we migrate to the generator infrastructure.'
|
||||
|
||||
runs:
|
||||
using: 'composite'
|
||||
@ -27,7 +25,7 @@ runs:
|
||||
working-directory: ./core
|
||||
- name: Test
|
||||
if: inputs.update != 'true'
|
||||
run: npm run test.e2e${{ inputs.commandModifier }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Test and Update
|
||||
@ -49,14 +47,14 @@ runs:
|
||||
# which is why we not using the upload-archive
|
||||
# composite step here.
|
||||
run: |
|
||||
npm run test.e2e${{ inputs.commandModifier }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
|
||||
npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
|
||||
git add src/\*.png --force
|
||||
mkdir updated-screenshots
|
||||
cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
|
||||
if [ -d core/updated-screenshots/core ]; then
|
||||
echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
|
||||
cd core/updated-screenshots
|
||||
zip -q -r ../../UpdatedScreenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
|
||||
zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
|
||||
fi
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
@ -64,8 +62,8 @@ runs:
|
||||
if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: updated-screenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
path: UpdatedScreenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
- name: Archive Test Results
|
||||
# The always() ensures that this step
|
||||
# runs even if the previous step fails.
|
||||
@ -76,6 +74,6 @@ runs:
|
||||
if: always()
|
||||
uses: ./.github/workflows/actions/upload-archive
|
||||
with:
|
||||
name: test-results${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
output: core/TestResults${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
output: core/TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
paths: core/playwright-report
|
||||
|
||||
39
.github/workflows/build.yml
vendored
39
.github/workflows/build.yml
vendored
@ -81,45 +81,6 @@ jobs:
|
||||
if: ${{ needs.test-core-screenshot.result != 'success' }}
|
||||
run: exit 1
|
||||
|
||||
test-core-screenshot-legacy:
|
||||
strategy:
|
||||
matrix:
|
||||
# Divide the tests into n buckets
|
||||
# and run those buckets in parallel.
|
||||
# To increase the number of shards,
|
||||
# add new items to the shard array
|
||||
# and change the value of totalShards
|
||||
# to be the length of the shard array.
|
||||
shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
totalShards: [20]
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
totalShards: ${{ matrix.totalShards }}
|
||||
commandModifier: '.legacy'
|
||||
|
||||
# Screenshots are required to pass
|
||||
# in order for the branch to be merge
|
||||
# eligible. However, the screenshot tests
|
||||
# are run on n runners where n can change
|
||||
# over time. The verify-screenshots step allows
|
||||
# us to have a required status check for screenshot
|
||||
# results without having to manually add each
|
||||
# matrix run in the branch protection rules
|
||||
# Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
|
||||
verify-screenshots-legacy:
|
||||
if: ${{ always() }}
|
||||
needs: test-core-screenshot-legacy
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check build matrix status
|
||||
if: ${{ needs.test-core-screenshot-legacy.result != 'success' }}
|
||||
run: exit 1
|
||||
|
||||
build-vue:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
39
.github/workflows/stencil-nightly.yml
vendored
39
.github/workflows/stencil-nightly.yml
vendored
@ -87,45 +87,6 @@ jobs:
|
||||
if: ${{ needs.test-core-screenshot.result != 'success' }}
|
||||
run: exit 1
|
||||
|
||||
test-core-screenshot-legacy:
|
||||
strategy:
|
||||
matrix:
|
||||
# Divide the tests into n buckets
|
||||
# and run those buckets in parallel.
|
||||
# To increase the number of shards,
|
||||
# add new items to the shard array
|
||||
# and change the value of totalShards
|
||||
# to be the length of the shard array.
|
||||
shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
||||
totalShards: [20]
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
totalShards: ${{ matrix.totalShards }}
|
||||
commandModifier: '.legacy'
|
||||
|
||||
# Screenshots are required to pass
|
||||
# in order for the branch to be merge
|
||||
# eligible. However, the screenshot tests
|
||||
# are run on n runners where n can change
|
||||
# over time. The verify-screenshots step allows
|
||||
# us to have a required status check for screenshot
|
||||
# results without having to manually add each
|
||||
# matrix run in the branch protection rules
|
||||
# Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
|
||||
verify-screenshots-legacy:
|
||||
if: ${{ always() }}
|
||||
needs: test-core-screenshot-legacy
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check build matrix status
|
||||
if: ${{ needs.test-core-screenshot-legacy.result != 'success' }}
|
||||
run: exit 1
|
||||
|
||||
build-vue:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
@ -90,8 +90,7 @@
|
||||
"test": "npm run test.spec && npm run test.e2e",
|
||||
"test.spec": "stencil test --spec --max-workers=2",
|
||||
"test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
|
||||
"test.e2e": "npx playwright test --config playwright.config.ts",
|
||||
"test.e2e.legacy": "npx playwright test --config playwright.config-legacy.ts",
|
||||
"test.e2e": "npx playwright test",
|
||||
"test.watch": "jest --watch --no-cache",
|
||||
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
|
||||
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
import type { PlaywrightTestConfig, PlaywrightTestOptions, PlaywrightWorkerOptions, Project } from '@playwright/test';
|
||||
import { devices, expect } from '@playwright/test';
|
||||
|
||||
import { matchers } from './src/utils/test/playwright';
|
||||
|
||||
expect.extend(matchers);
|
||||
|
||||
const projects: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [
|
||||
{
|
||||
/**
|
||||
* This is really just desktop Firefox
|
||||
* but with a mobile viewport.
|
||||
*/
|
||||
name: 'Mobile Firefox',
|
||||
use: {
|
||||
browserName: 'firefox',
|
||||
/**
|
||||
* This is the Pixel 5 configuration.
|
||||
* We can't use devices['Pixel 5']
|
||||
* because the "isMobile" option is
|
||||
* not supported on Firefox.
|
||||
*/
|
||||
viewport: {
|
||||
width: 393,
|
||||
height: 727
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Mobile Chrome',
|
||||
use: {
|
||||
browserName: 'chromium',
|
||||
...devices['Pixel 5']
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Mobile Safari',
|
||||
use: {
|
||||
browserName: 'webkit',
|
||||
...devices['iPhone 12']
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const modes = ['ios', 'md'];
|
||||
|
||||
const generateProjects = () => {
|
||||
const projectsWithMetadata: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [];
|
||||
|
||||
modes.forEach(mode => {
|
||||
projects.forEach(project => {
|
||||
projectsWithMetadata.push({
|
||||
...project,
|
||||
metadata: {
|
||||
mode,
|
||||
rtl: false,
|
||||
_testing: true
|
||||
}
|
||||
});
|
||||
projectsWithMetadata.push({
|
||||
...project,
|
||||
metadata: {
|
||||
mode,
|
||||
rtl: true,
|
||||
_testing: true
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return projectsWithMetadata;
|
||||
}
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
const config: PlaywrightTestConfig = {
|
||||
testMatch: '*.e2e-legacy.ts',
|
||||
expect: {
|
||||
/**
|
||||
* Maximum time expect() should wait for the condition to be met.
|
||||
* For example in `await expect(locator).toHaveText();`
|
||||
*/
|
||||
timeout: 5000
|
||||
},
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Fail fast on CI */
|
||||
maxFailures: process.env.CI ? 1 : 0,
|
||||
/* Flaky test should be either addressed or disabled until we can address them */
|
||||
retries: 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: 'html',
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||
actionTimeout: 0,
|
||||
/**
|
||||
* All failed tests should create
|
||||
* a trace file for easier debugging.
|
||||
*
|
||||
* See https://playwright.dev/docs/trace-viewer
|
||||
*/
|
||||
trace: 'retain-on-failure',
|
||||
baseURL: 'http://localhost:3333',
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: generateProjects(),
|
||||
webServer: {
|
||||
command: 'serve -p 3333',
|
||||
port: 3333,
|
||||
reuseExistingServer: !process.env.CI
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@ -8,4 +8,3 @@ This directory contains information on how to get the most out of Ionic's E2E te
|
||||
| - | - |
|
||||
| [Best Practices](./best-practices.md) | Contains information on conventions to follow as well as pitfalls to avoid when writing tests |
|
||||
| [API](./api.md) | Documents the custom functionality that has been built on top of Playwright |
|
||||
| [Migrating to Generators](./migrating-to-generators.md) | A step-by-step guide for migrating existing E2E tests to use the generator architecture |
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
# Generator Migration
|
||||
|
||||
This guide shows how to migrate an E2E test to use the new generator architecture.
|
||||
|
||||
## Steps to Migrate
|
||||
|
||||
1. Import `configs` from `@utils/test/playwright`.
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* test should already have been imported
|
||||
* for the existing E2E test.
|
||||
*/
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
```
|
||||
|
||||
2. Call `configs` outside of the `test.describe` block, and pass in any of your configuration. This should replace any `skip.rtl` or `skip.mode` calls. `skip.browser` calls can remain in place. If you are not using `skip.rtl` or `skip.mode` then you can call `configs` without passing an options (i.e. `configs().forEach(...)`).
|
||||
|
||||
```typescript
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
|
||||
test.describe('accordion: basic', () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
:warning: Be careful when replacing `skip.rtl` and `skip.mode` with `configs`. For example, `skip.mode('md')` means that the test should _skip_ MD mode and only run in iOS mode **not** that the test should only run in MD mode. Similarly, `skip.rtl()` means that the test should only run in the LTR direction.
|
||||
|
||||
3. Update the title of the describe block to use the `title` function.
|
||||
|
||||
```typescript
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
|
||||
test.describe(title('accordion: basic'), () => {
|
||||
...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
4. Pass the `config` object to either `page.goto` or `page.setContent`.
|
||||
|
||||
```typescript
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
|
||||
test.describe(title('accordion: basic'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/accordion/test/basic', config);
|
||||
|
||||
/**
|
||||
* If using setContent:
|
||||
* await page.setContent('...', config);
|
||||
*/
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
5. If taking a screenshot, replace `page.getSnapshotSettings()` with the `screenshot` function.
|
||||
|
||||
```typescript
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
|
||||
test.describe(title('accordion: basic'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/accordion/test/basic', config);
|
||||
|
||||
/**
|
||||
* The `screenshot` function will automatically add ".png"
|
||||
* as well as the test config.
|
||||
*/
|
||||
await expect(page).toHaveScreenshot(screenshot('accordion-basic'));
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
6. Rename your `*.e2e-legacy.ts` file to `*.e2e.ts`.
|
||||
|
||||
**Example:** `accordion.e2e-legacy.ts` becomes `accordion.e2e.ts`
|
||||
|
||||
7. If the test has a screenshots directory, rename the `*.e2e-legacy.ts-snapshots` directory to `*.e2e.ts-snapshots`.
|
||||
|
||||
**Example:** `accordion.e2e-legacy.ts-snapshots` becomes `accordion.e2e.ts-snapshots`
|
||||
|
||||
8. Run `git add .` to stage your changes.
|
||||
|
||||
:warning: It is very important that you also stage the screenshot files when renaming the directory. The screenshot files are gitignored to prevent team members from accidentally overwriting the ground truth screenshots. As a result, you will need to bypass the gitignore to add the screenshots using the `--force` (`-f`) flag:
|
||||
|
||||
`git add -f src/components/[name of component]/test/[test directory]/**/*-linux.png`
|
||||
|
||||
This will forcibly stage only the screenshots generated on CI (due to the use of `-linux.png`).
|
||||
|
||||
**Example:** `git add -f src/components/accordion/test/basic/**/*-linux.png`
|
||||
|
||||
9. Review your changes. **There should be no deleted or added screenshots.** Instead, the screenshots should be listed as "renamed".
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
renamed: src/components/accordion/test/basic/accordion.e2e-legacy.ts -> src/components/accordion/test/basic/accordion.e2e.ts
|
||||
renamed: src/components/accordion/test/basic/accordion.e2e-legacy.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png -> src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png
|
||||
renamed: src/components/accordion/test/basic/accordion.e2e-legacy.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png -> src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png
|
||||
renamed: src/components/accordion/test/basic/accordion.e2e-legacy.ts-snapshots/accordion-basic-ios-ltr-Mobile-Safari-linux.png -> src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Safari-linux.png
|
||||
```
|
||||
|
||||
10. Commit your changes using the following format: `test([component]): migrate [test directory] to generators`
|
||||
|
||||
**Example:** `test(accordion): migrate basic to generators`
|
||||
|
||||
11. Push your changes.
|
||||
Reference in New Issue
Block a user