mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
test(title): migrate to Playwright (#26286)
This commit is contained in:
Amanda Johnston
88
core/src/components/title/test/basic/index.html
Normal file
88
core/src/components/title/test/basic/index.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Title - Basic</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<div id="header-wrapper">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Settings</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Browse</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button>Cancel</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-back-button default-href="#"></ion-back-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Title</ion-title>
|
||||||
|
<ion-title class="hide-ios" size="small">Subtitle</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button><ion-icon slot="icon-only" name="search"></ion-icon></ion-button>
|
||||||
|
<ion-button><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title size="small">Choose a contact to add to Favorites</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Contacts</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button>Cancel</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title size="small">
|
||||||
|
Choose multiple contacts to add to your Favorites so this just goes on and on and on
|
||||||
|
</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-button>Groups</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Contacts</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button>Cancel</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-content fullscreen> </ion-content>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.ios .hide-ios {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
core/src/components/title/test/basic/title.e2e.ts
Normal file
12
core/src/components/title/test/basic/title.e2e.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
test.describe('title: basic', () => {
|
||||||
|
test('should not have visual regressions', async ({ page }) => {
|
||||||
|
await page.goto('/src/components/title/test/basic');
|
||||||
|
const wrapper = page.locator('#header-wrapper');
|
||||||
|
|
||||||
|
// only screenshot the headers to avoid unnecessary blank space from ion-content
|
||||||
|
expect(await wrapper.screenshot()).toMatchSnapshot(`title-basic-${page.getSnapshotSettings()}.png`);
|
||||||
|
});
|
||||||
|
});
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@ -1,83 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" dir="ltr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Toolbar - Title</title>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
||||||
/>
|
|
||||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
|
||||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
|
||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
||||||
<script src="../../../../../dist/ionic.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<ion-app>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-back-button text="Mailboxes" default-href="/"></ion-back-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-buttons slot="primary">
|
|
||||||
<ion-button> Edit </ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title>Inbox</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-back-button text="Mailboxes" default-href="/"></ion-back-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-buttons slot="primary">
|
|
||||||
<ion-button> Edit </ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title size="large">Inbox</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-back-button text="Mailboxes" default-href="/"></ion-back-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-buttons slot="primary">
|
|
||||||
<ion-button> Edit </ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title size="large">Inbox</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-searchbar></ion-searchbar>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Title</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title size="large">Title</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-content></ion-content>
|
|
||||||
|
|
||||||
<ion-footer>
|
|
||||||
<ion-button expand="full" onClick="toggle()" class="ion-no-margin">Toggle Size</ion-button>
|
|
||||||
</ion-footer>
|
|
||||||
</ion-app>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const titles = document.querySelectorAll('ion-title[size]');
|
|
||||||
function toggle() {
|
|
||||||
for (title of titles) {
|
|
||||||
const size = title.size === 'large' ? undefined : 'large';
|
|
||||||
title.size = size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
test('title: sizes', async () => {
|
|
||||||
const page = await newE2EPage({
|
|
||||||
url: '/src/components/title/test/sizes?ionic:_testing=true',
|
|
||||||
});
|
|
||||||
|
|
||||||
const compare = await page.compareScreenshot();
|
|
||||||
expect(compare).toMatchScreenshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('title:rtl: sizes', async () => {
|
|
||||||
const page = await newE2EPage({
|
|
||||||
url: '/src/components/title/test/sizes?ionic:_testing=true&rtl=true',
|
|
||||||
});
|
|
||||||
|
|
||||||
const compare = await page.compareScreenshot();
|
|
||||||
expect(compare).toMatchScreenshot();
|
|
||||||
});
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" dir="ltr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Title - Sizes</title>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
||||||
/>
|
|
||||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
|
||||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
|
||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<ion-app>
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Settings</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Browse</ion-title>
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button>Cancel</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-searchbar></ion-searchbar>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar class="hide-md">
|
|
||||||
<ion-title size="small">Choose a contact to add to Favorites</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-back-button default-href="#"></ion-back-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title>Title</ion-title>
|
|
||||||
<ion-title class="hide-ios" size="small">Subtitle</ion-title>
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button><ion-icon slot="icon-only" name="search"></ion-icon></ion-button>
|
|
||||||
<ion-button><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-searchbar></ion-searchbar>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title size="small">Choose a contact to add to Favorites</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Contacts</ion-title>
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button>Cancel</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-searchbar></ion-searchbar>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar color="secondary">
|
|
||||||
<ion-title size="small">
|
|
||||||
Choose multiple contacts to add to your Favorites so this just goes on and on and on
|
|
||||||
</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar color="secondary">
|
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-button>Groups</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title>Contacts</ion-title>
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button>Cancel</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-toolbar>
|
|
||||||
<ion-toolbar color="secondary">
|
|
||||||
<ion-searchbar></ion-searchbar>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-content fullscreen> </ion-content>
|
|
||||||
</ion-app>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.md .hide-md {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ios .hide-ios {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* testing purposes only
|
|
||||||
ion-header {
|
|
||||||
border-top: 1px solid red;
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user