Pull request #2367: ADG-9679 add playwright test from python

Merge in DNS/adguard-home from ADG-9679 to master

Squashed commit of the following:

commit d2a759b4636b7ec931bfba625827c8b91c60c7e7
Merge: a5e7eea16 9726171f0
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Apr 14 16:05:01 2025 +0200

    Merge remote-tracking branch 'origin/master' into ADG-9679

commit a5e7eea16e6c29d25290ee79b1918df8af59bb51
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Apr 14 13:56:26 2025 +0200

    vitest version bump

commit 26620d1923d92b3a6eb9b80a364748f2f6f66030
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:39:11 2025 +0200

    formatting

commit dbab03d1316241eaff0fc9c99d58a1933e415d2b
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:37:55 2025 +0200

    rollback experiments

commit 4427d984177786f7d905915cf8080166b45d7b46
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:33:28 2025 +0200

    checking dir structure

commit 2cf7eed247d2869ed285dbee0bf32cf1d8df7e86
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:21:11 2025 +0200

    fixed docker image builder

commit 8bd06f412fad9dd09df0e076879bd2cbd2f30d1a
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:18:33 2025 +0200

    home-js-builder version bump

commit 2a83bfeb322a20ec4278e359b18d0466966ec043
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 15:17:38 2025 +0200

    try to remove installation dependencies for e2e test (build is already available)

commit 163e4581e83152f99058b798484468009e8e88b0
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 13:52:27 2025 +0200

    Revert "changed nslookup to dig in e2e tests"
    
    This reverts commit ecb68200ea28e295f504338cc59c711b5540022b.

commit 15f7c5e2c77e230da77a0f9de0bd9cce8451da95
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Thu Apr 10 13:45:40 2025 +0200

    js-home-builder version bump

commit ecb68200ea28e295f504338cc59c711b5540022b
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Apr 9 15:07:39 2025 +0200

    changed nslookup to dig in e2e tests

commit 77c94a60be8839f3e0ad9d02e7dbb2ebd802d3d6
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Wed Apr 9 11:09:15 2025 +0300

    revert timeouts

commit 9dfebc8bcaf2cd3258b39fcbd0f67ab51c2eb46d
Merge: 912f4cb7b 1cc6c00e4
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Wed Apr 9 11:02:19 2025 +0300

    merge master

commit 912f4cb7b71f02866244fe447ca0e7fbd2a015bb
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Wed Apr 9 10:48:59 2025 +0300

    cleanup code

commit 9da200ebca5b001f4952f33d819d90c1938920ee
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Thu Apr 3 17:39:20 2025 +0300

    update tests

commit 794e0bd0a92a41c4d3827b716eeab584a25bd3ed
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Thu Mar 13 18:15:58 2025 +0300

    cleanup

commit 9a523b4e255dd24c0f640bc279924ed2c13509a9
Author: Eugene Miroshkin <e.miroshkin@adguard.com>
Date:   Thu Mar 13 18:04:34 2025 +0300

    ADG-9679 add playwright test from python

client/src/components/Filters/CustomRules.tsx

@@ -78,6 +78,7 @@ class CustomRules extends Component<CustomRulesProps> {
                     <form onSubmit={this.handleSubmit}>
                         <div className="text-edit-container mb-4">
                             <textarea
+                                data-testid="custom_rule_textarea"
                                 className="form-control font-monospace text-input"
                                 value={userRules}
                                 onChange={this.handleChange}
@@ -91,6 +92,7 @@ class CustomRules extends Component<CustomRulesProps> {
 
                         <div className="card-actions">
                             <button
+                                data-testid="apply_custom_rule"
                                 className="btn btn-success btn-standard btn-large"
                                 type="submit"
                                 onClick={this.handleSubmit}>

client/src/components/Header/index.tsx

@@ -59,7 +59,7 @@ const Header = () => {
                     <div className="header__column">
                         <div className="header__right">
                             {!processingProfile && name && (
-                                <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                                <a href="control/logout" className="btn btn-sm btn-outline-secondary" data-testid="sign_out">
                                     {t('sign_out')}
                                 </a>
                             )}

client/src/components/Logs/Cells/index.tsx

@@ -288,7 +288,7 @@ const Row = memo(
         );
 
         return (
-            <div style={style} className={className} onClick={onClick} role="row">
+            <div style={style} className={className} onClick={onClick} role="row" data-testid="querylog_cell">
                 <DateCell {...rowProps} />
 
                 <DomainCell {...rowProps} />

client/src/components/Logs/Filters/Form.tsx

@@ -84,6 +84,7 @@ export const Form = ({ className, setIsLoading }: Props) => {
             }}>
             <div className="field__search">
                 <SearchField
+                    data-testid="querylog_search"
                     value={searchValue}
                     handleChange={(val) => setValue('search', val)}
                     onKeyDown={onEnterPress}

client/src/components/Settings/index.tsx

@@ -27,12 +27,14 @@ const SETTINGS = {
         enabled: false,
         title: i18next.t('use_adguard_browsing_sec'),
         subtitle: i18next.t('use_adguard_browsing_sec_hint'),
+        testId: 'safebrowsing',
         [ORDER_KEY]: 0,
     },
     parental: {
         enabled: false,
         title: i18next.t('use_adguard_parental'),
         subtitle: i18next.t('use_adguard_parental_hint'),
+        testId: 'parental',
         [ORDER_KEY]: 1,
     },
 };
@@ -90,11 +92,12 @@ class Settings extends Component<SettingsProps> {
     renderSettings = (settings: any) =>
         getObjectKeysSorted(SETTINGS, ORDER_KEY).map((key: any) => {
             const setting = settings[key];
-            const { enabled, title, subtitle } = setting;
+            const { enabled, title, subtitle, testId } = setting;
 
             return (
                 <div key={key} className="form__group form__group--checkbox">
                     <Checkbox
+                        data-testid={testId}
                         value={enabled}
                         title={title}
                         subtitle={subtitle}
@@ -118,6 +121,7 @@ class Settings extends Component<SettingsProps> {
             <>
                 <div className="form__group form__group--checkbox">
                     <Checkbox
+                        data-testid="safesearch"
                         value={enabled}
                         title={i18next.t('enforce_safe_search')}
                         subtitle={i18next.t('enforce_save_search_hint')}

client/src/components/ui/Footer.tsx

@@ -94,14 +94,17 @@ const Footer = () => {
             auto: {
                 desc: t('theme_auto_desc'),
                 icon: '#auto',
+                testId: 'theme_auto',
             },
             dark: {
                 desc: t('theme_dark_desc'),
                 icon: '#dark',
+                testId: 'theme_dark',
             },
             light: {
                 desc: t('theme_light_desc'),
                 icon: '#light',
+                testId: 'theme_light',
             },
         };
 
@@ -113,7 +116,9 @@ const Footer = () => {
                     type="button"
                     className="btn btn-sm btn-secondary footer__theme-button"
                     onClick={() => onThemeChange(theme)}
-                    title={content[theme].desc}>
+                    title={content[theme].desc}
+                    data-testid={content[theme].testId}
+                >
                     <svg className={cn('footer__theme-icon', { 'footer__theme-icon--active': currentValue === theme })}>
                         <use xlinkHref={content[theme].icon} />
                     </svg>