do not use deprecated methods of playwright code

jooy2 · Oct 31, 2023 · 4a79270 · 4a79270
1 parent 394aeb5
commit 4a79270
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/src/renderer/screens/Main.tsx b/src/renderer/screens/Main.tsx
@@ -43,26 +43,31 @@ const Main = () => {
       <div css={jumbo}>
         <Grid container alignItems="center" spacing={3}>
           <Grid item xs={5}>
-            <img id="main-logo" alt="logo" src="images/retron-logo.webp" draggable="false" />
+            <img
+              data-testid="main-logo"
+              alt="logo"
+              src="images/retron-logo.webp"
+              draggable="false"
+            />
           </Grid>
           <Grid item xs={7}>
             <h1>{t('hello-title')}</h1>
             <p>{t('hello-desc')}</p>
             <p>
               {t('using-version')} <strong>{appVersion}</strong>
             </p>
-            <p>
+            <p data-testid="counter-value">
               {t('count-value')}{' '}
-              <span id="counter-value">
-                <strong>{counterValue}</strong>
+              <span>
+                <strong role="status">{counterValue}</strong>
               </span>
             </p>
             <ButtonGroup variant="contained">
               <Button onClick={handleGithubLink}>{t('github')}</Button>
-              <Button id="btn-change-theme" onClick={handleChangeTheme}>
+              <Button data-testid="btn-change-theme" onClick={handleChangeTheme}>
                 {darkTheme ? '🌞' : '🌙'}
               </Button>
-              <Button id="btn-counter" color="success" onClick={handleIncreaseCount}>
+              <Button data-testid="btn-counter" color="success" onClick={handleIncreaseCount}>
                 +1
               </Button>
             </ButtonGroup>

diff --git a/tests/app.spec.ts b/tests/app.spec.ts
@@ -11,12 +11,13 @@ function waiting(milliseconds: number) {
   });
 }
 
-function isElementVisible(selector: string, waitingMilliseconds = 100) {
+function existElementByTestId(selector: string, waitingMilliseconds = 100) {
   return new Promise((resolve) => {
     setTimeout(async () => {
-      expect(await appWindow.isVisible(selector), `Confirm selector '${selector}' is visible`).toBe(
-        true,
-      );
+      await expect(
+        appWindow.getByTestId(selector).first(),
+        `Confirm selector '${selector}' is visible`,
+      ).toBeVisible();
       resolve(true);
     }, waitingMilliseconds);
   });
@@ -37,19 +38,19 @@ test('Environment check', async () => {
 });
 
 test('Document element check', async () => {
-  await isElementVisible('#main-logo');
-  await isElementVisible('#btn-change-theme');
+  await existElementByTestId('main-logo');
+  await existElementByTestId('btn-change-theme');
 });
 
 test('Counter button click check', async () => {
-  await appWindow.click('#btn-counter', { clickCount: 10, delay: 50 });
+  await appWindow.getByTestId('btn-counter').click({ clickCount: 10, delay: 50 });
 
-  const counterValueElement = await appWindow.$('#counter-value strong');
+  const counterValueElement = await appWindow
+    .getByTestId('counter-value')
+    .getByRole('status')
+    .innerHTML();
 
-  expect(
-    await appWindow.evaluate((element) => element.innerHTML, counterValueElement),
-    'Confirm counter value is same',
-  ).toBe('10');
+  expect(counterValueElement, 'Confirm counter value is same').toBe('10');
 });
 
 test.afterAll(async () => {