Hi all,
I’m having an issue with Spying/Recording/Inspecting elements/widgets in a Flutter app.
The problem is that Katalon Inspector cannot detect the Text Field widget, which is located within a BottomSheet widget.
Here is the UI (I’m unable to inspect the Search text field).
You can see the screen record here:
for the flutter code, you can find it here:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) => _BottomsheetDropdown(
title: title,
items: items,
onChanged: onChanged,
selectedItem: selectedItem,
onReset: onReset,
identifierListDropdown: identifierListDropdown,
identifierSearchDropdown: identifierSearchDropdown)
)
and here:
class _BottomsheetDropdown extends ConsumerWidget
with AddOrEditCarEvent, AddOrEditCarState {
const _BottomsheetDropdown(
{required this.title,
required this.items,
required this.onChanged,
required this.selectedItem,
this.onReset,
this.identifierSearchDropdown,
this.identifierListDropdown});
final String title;
final List<ItemDropdown>? items;
final ValueChanged<ItemDropdown?> onChanged;
final ItemDropdown? selectedItem;
final Function? onReset;
final String? identifierSearchDropdown;
final String? identifierListDropdown;
@override
Widget build(BuildContext context, WidgetRef ref) {
final maxHeight = MediaQuery.of(context).size.height * 0.5;
final loc = ref.watch(appLocalizationsProvider);
return Wrap(
children: [
Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16)),
color: AppColorTheme.white),
padding: EdgeInsets.only(
top: 16,
right: 16,
left: 16,
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
gapH16,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title, style: AppTextTheme.semiBoldBase),
if (onReset != null)
TextButton(
onPressed: () {
onReset?.call();
Navigator.pop(context);
},
child: Text(
loc.reset,
style: AppTextTheme.regularBase
.copyWith(color: AppColorTheme.primary500),
),
)
],
),
gapH24,
Consumer(builder: (context, consRef, _) {
return Semantics(
identifier: identifierSearchDropdown,
child: CustomTextFormFieldWithTitle(
name: 'keySearch',
hintText: loc.search,
customValidator: FormBuilderValidators.compose([]),
onChanged: (value) {
dropdownSearchOnChanged(consRef, value);
},
),
);
}),
gapH8,
ConstrainedBox(
constraints: BoxConstraints(maxHeight: maxHeight),
child: items == null
? const SizedBox.shrink()
: Consumer(builder: (context, consRef, _) {
final filteredItem = getFilteredItems(consRef, items);
return Semantics(
identifier: identifierListDropdown,
child: ListView.builder(
shrinkWrap: true,
itemCount: filteredItem!.length,
itemBuilder: (context, index) {
final item = filteredItem[index];
final isSelected = item == selectedItem;
return Material(
color: AppColorTheme.white,
child: InkWell(
onTap: () {
onChanged(item);
context.pop();
},
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'${item.name}',
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: AppTextTheme.regularSm
.copyWith(
color: AppColorTheme
.secondary500),
),
),
if (isSelected)
const Icon(Icons
.check_circle_outline_rounded)
],
),
),
Container(
width: double.infinity,
height: 1,
color: AppColorTheme.secondary100,
)
],
),
),
);
},
),
);
}),
)
],
))
],
);
}
}
