Widget Size and Color Test

[ruveydagunal]

Use case

While Flutter is testing, I want to test the colors and sizes of my widgets, there are not enough documents and I can't do this process.

Proposal

import 'package:flutter/material.dart';
import 'package:patrol_test/home_view.dart';
import 'package:patrol_test/password_forgot.dart';
import 'package:patrol_test/signUp_view.dart';

class SignInView extends StatefulWidget {
@OverRide
_SignInViewState createState() => _SignInViewState();
}

class _SignInViewState extends State {
final GlobalKey _formKey = GlobalKey();
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
bool _obscureText = true;
bool _formSubmitted = false;

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Giriş Sayfası',
key: Key('signInTitle'),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
key: Key('arrowBackButton'),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeView(),
),
);
},
),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
key: const Key('emailInput'),
controller: _emailController,
decoration: InputDecoration(
labelText: 'E-posta',
errorText: _formSubmitted
? _validateEmail(_emailController.text)
: null,
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 16),
TextFormField(
key: const Key('passwordInput'),
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Şifre',
errorText: _formSubmitted
? _validatePassword(_passwordController.text)
: null,
suffixIcon: IconButton(
icon: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off),
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
),
),
obscureText: _obscureText,
),
SizedBox(height: 24),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red
),
key: const Key('signInButton'),
onPressed: () {
setState(() {
_formSubmitted = true;
});

              String? emailError = _validateEmail(_emailController.text);
              String? passwordError =
                  _validatePassword(_passwordController.text);

              if (emailError == null && passwordError == null) {
                // Eğer e-posta ve şifre uygunsa yönlendirme yap
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => HomeView(),
                  ),
                );
              }
            },
            child: Text('Giriş Yap'),
          ),
          TextButton(
            key: Key('passwordForgot'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PasswordForgot(),
                ),
              );
            },
            child: Text('Şifremi Unuttum'),
          ),
          Text('Hesabınız Yok mu?', key: Key('signUpText'),),
          ElevatedButton(
            key: const Key('signUpButton'),
            onPressed: () {
              setState(() {
                _formSubmitted = true;
              });
              if (_formKey.currentState!.validate()) {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SignUpView(),
                  ),
                );
              }
            },
            child: Text('Üye Ol'),
          ),
        ],
      ),
    ),
  ),
);

}

String? _validateEmail(String value) {
if (value.isEmpty) {
return 'E-posta boş olamaz';
} else if (!RegExp(r'^[\w-]+(.[\w-]+)*@([\w-]+.)+[a-zA-Z]{2,7}$')
.hasMatch(value)) {
return 'Geçersiz e-posta formatı';
}
return null;
}

String? _validatePassword(String value) {
if (value.isEmpty) {
return 'Şifre boş olamaz';
}
return null;
}
}

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:patrol/patrol.dart';
import 'package:patrol_test/main.dart';

void main() {
patrolTest(
'Sign in Successfully',
($) async {
// Uygulamayı başlat
await $.pumpWidgetAndSettle(const MyApp());

  // Appbar title ve buton kontrolü
  expect($(#signInTitle).exists, true);
  expect($(#arrowBackButton).exists, true);

  // Geri butonuna tıklandığında
  await $(#arrowBackButton).tap();
  expect($(#homeView).exists, true);
  await $(#arrowBackButtonHome).tap();

  // // E-posta ve şifre girişi
  await $(#emailInput).enterText('[email protected]');
  await $(#passwordInput).enterText('1q2w3e4r5T.');

  // // Giriş Yap butonuna tıklandığında
  await $(#signInButton).tap();
  expect($(#homeView).exists, true);
  await $(#arrowBackButtonHome).tap();

  await $('Giriş Yap')
    .which<ElevatedButton>((button) => !button.enabled)
    .which<ElevatedButton>(
      (btn) => btn.style?.backgroundColor?.resolve({}) == Colors.red,
    )
    .waitUntilVisible();

  // Şifremi Unuttum kontrolü
  await $(#passwordForgot).tap();
  expect($(#passwordForgotTitle).exists, true);
  await $(#arrowBackButtonForgot).tap();

  // Hesabınız Yok mu? text kontrolü
  expect($(#signUpText).exists, true);

  // Şifremi Unuttum kontrolü
  await $(#signUpButton).tap();
  expect($(#signUpTitle).exists, true);
  await $(#arrowBackButtonSignUp).tap();
},

);
}

[jBorkowska]

Hi @ruveydagunal! If you want to check widget's properties as size or color, you can access the widget object. Eg.:

   // obtaining Widget object of found element
   final button = $(#signUpButton).evaluate().first.widget as ElevatedButton;
   // accessing properties of that widget, eg. if is enabled
   expect(button.enabled, false);

Let me know if it helped

[ruveydagunal]

Hello, I tried to do the color control this way, but I'm getting an error. I would be very glad if you could help patrolTest('UI > Sign In Button Color Successfully', ($) async { // Uygulamayı başlat await $.pumpWidgetAndSettle(const MyApp()); // obtaining Widget object of found element final button = $(#signInButton).evaluate().first.widget as ElevatedButton; // accessing properties of that widget, eg. if is enabled expect(button.enabled, true); expect(button.style?.backgroundColor, Color(0xfff44336)); }); Julia Borkowska ***@***.***>, 23 Kas 2023 Per, 16:33 tarihinde şunu yazdı:

…

Hi @ruveydagunal <https://github.com/ruveydagunal>! If you want to check widget's properties as size or color, you can access the widget object. Eg.: // obtaining Widget object of found element final button = $(#signUpButton).evaluate().first.widget as ElevatedButton; // accessing properties of that widget, eg. if is enabled expect(button.enabled, false); Let me know if it helped — Reply to this email directly, view it on GitHub <#1936 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BASZDZQBPAHSLTI4QCNBEBLYF5GD7AVCNFSM6AAAAAA7U23J76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRUGQ2DOOBZGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jBorkowska]

What error did you get? Please post the logs :)

[github-actions]

Without additional information, we can't resolve this issue. We're therefore reluctantly going to close it.
Feel free to open a new issue with all the required information provided, including a [minimal, reproducible sample]. Make sure to diligently fill out the issue template.
Thanks for your contribution.
[minimal, reproducible sample]: https://stackoverflow.com/help/minimal-reproducible-example

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar problem, please file a new issue. Make sure to follow the template and provide all the information necessary to reproduce the issue.