如何在Espresso中打开选项卡

Question

如何在Espresso测试中打开选项卡？我尝试使用以下代码：Espresso.onView(ViewMatchers.withId(R.id.practice_results_tab)).perform(ViewActions.click());，但这不起作用。在这段代码中，我打开了此选项卡的布局。 以下是XML文件：

    <TabHost
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/practice_tabHost">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">

                <LinearLayout
                    android:id="@+id/practice_settings_tab"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical">

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/practice_results_tab"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical">

                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

我应该使用哪个ID来打开选项卡？

logcat中的错误信息：

Caused by: java.lang.RuntimeException: Action will not be performed because the target     view does not match one or more of the following constraints:
at least 90 percent of the view's area is displayed to the user.
Target view: "LinearLayout{id=2131296384, res-name=practice_results_tab, visibility=GONE, width=0, height=0, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=1}"

- Pasha Shkaran

---

那个异常的完整堆栈跟踪是什么？在PerformExceptions中，“Caused by”部分最重要。 - haffax

@haffax 添加完整的堆栈跟踪。 - Pasha Shkaran

错误提示说你的目标视图是线性布局。我建议先仔细检查一下xml中的id是否正确。你的选项卡上有没有任何文本？你可以使用“onView(withText('这里输入字符串'))”来引用你的视图吗？ - Maxwell

@Maxwell 添加 XML 文件。我不明白在基础知识中如何打开选项卡？ - Pasha Shkaran

Answer 1

完成的代码

为了给出正确的答案，您需要添加代码。我猜想您使用了TabHost和TabWidget，就像这个示例一样：https://maxalley.wordpress.com/2012/10/25/android-creating-a-tab-layout-with-tabhost-and-tabwidget/

我在https://github.com/hanscappelle/SO-25016397创建了一个示例项目。

您的Activity可能如下所示：

public class MainActivity extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = getTabHost();

        // setNewTab(context, tabHost, tag, title, icon, contentID);
        this.setNewTab(this, tabHost, "tab1", R.string.textTabTitle1, R.drawable.ic_tab_settings, R.id.practice_settings_tab);
        this.setNewTab(this, tabHost, "tab2", R.string.textTabTitle2, R.drawable.ic_tab_results, R.id.practice_results_tab);

    }

    private void setNewTab(Context context, TabHost tabHost, String tag, int title, int icon, int contentID ){
        TabSpec tabSpec = tabHost.newTabSpec(tag);
        String titleString = getString(title);
        tabSpec.setIndicator(titleString, context.getResources().getDrawable(android.R.drawable.star_on));
        tabSpec.setContent(contentID);
        tabHost.addTab(tabSpec);
    }
}

我在这里找到了另一个代码示例，其中有一个帮助方法可以为选项卡插入ImageView以进行样式设置。

private View getTabIndicator(Context context, int title, int icon) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
        ImageView iv = (ImageView) view.findViewById(R.id.imageView);
        iv.setImageResource(icon);
        TextView tv = (TextView) view.findViewById(R.id.textView);
        tv.setText(title);
        return view;
    }

现在变得有趣了，因为这样我们可以轻松地在这些注入的View对象上设置ID或标签，并在Espresso中使用它们。

解决方案：给视图打标签

如果您将该助手适应为接受每个视图助手的标记，则代码将如下所示：

private View getTabIndicator(Context context, int title, int icon, int viewId, String viewTag) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
        ImageView iv = (ImageView) view.findViewById(R.id.image_view);
        iv.setImageResource(icon);
        TextView tv = (TextView) view.findViewById(R.id.text_view);
        tv.setText(title);
        tv.setTag(viewTag);
        return view;
    }

如果您只使用图标，您也可以在ImageView上设置ID。而点击这些选项卡的Espresso代码如下：

Espresso.onView(ViewMatchers.withTagValue(Matchers.is((Object)"tab1"))).perform(ViewActions.click());

备选方案：使用视图 ID

如果你使用ID，需要在某处定义这些ID。可以使用一个简单的Android资源文件来定义一些ID。

视图 ID 资源文件名为 /values/ids.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="tab1" type="id" />
</resources>

适配的助手：

private View getTabIndicator(Context context, int title, int icon, int viewId, String viewTag) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
    ImageView iv = (ImageView) view.findViewById(R.id.image_view);
    iv.setImageResource(icon);
    TextView tv = (TextView) view.findViewById(R.id.text_view);
    tv.setText(title);
    tv.setId(viewId);
    return view;
}

如果您仅使用图标，您也可以在ImageView上设置ID。 点击这些选项卡的Espresso代码：

Espresso.onView(ViewMatchers.withId(R.id.tab1)).perform(ViewActions.click());

关于TabHosts的概述

你为什么要使用这个已经过时的TabHost？请注意，该类目前已经被弃用。根据你的使用情况，带选项卡的ViewPager或ActionBar可能是更好的选择。

使用ViewHierarchy工具

在这种情况下，第一个问题通常是找到适当的视图。可以使用View Hierarchy工具解决这个问题。它是Android SDK的一部分并位于tools目录中。

你可以像这样从命令行启动它：

cd ANDROID_SDK_LOCATION/tools
hierarchyviewer

您可以使用Android Studio菜单：Tools > Android > Android Device Monitor。然后从设备监视器的菜单中打开层次结构视图透视图：Window > Open Perspective > Hierarchy View。

我更喜欢第一种选项，因为设备监视器对我们的意图来说过于复杂。

现在，结合布局视图和视图属性视图，查找您想要的视图的ID和标记。

关于此工具的一些说明：http://developer.android.com/tools/debugging/debugging-ui.html

- hcpl

---

这个解决方案是否与当前的ViewPager API兼容？ - IgorGanapolsky

Answer 2

对我唯一有效的方法是：

public void clickOnTab(String tabText) {    
    Matcher<View> matcher = allOf(withText(tabText),
                                  isDescendantOfA(withId(R.id.ll_tab_container)));
    onView(matcher).perform(click());    
}

这里的 ll_tab_container 是自定义tab布局中的linearlayout。如果你有一个叫做 "shopping" 的选项卡，那么你需要将它作为 tabText 参数传递。

- j2emanue

---

不需要精确标记视图。我认为这是最干净的解决方案。 - Paglian

Answer 3

onView(withText("您的选项卡标签")).执行(click())

- Ivo Stoyanov

---

这是最简单的一个！ - Lenoir Zamboni

Answer 4

也可以在不使用自定义指示器方法的情况下，在选项卡文本上设置标签。这可以通过在创建后访问选项卡的 TextView 来实现。

使用 hcpl 示例代码中的 MainActivity，代码如下：

public MainActivity extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = getTabHost();

        // setNewTab(context, tabHost, tag, title, icon, contentID);
        this.setNewTab(this, tabHost, "tab1", R.string.textTabTitle1, R.drawable.ic_tab_settings, R.id.practice_settings_tab);
        this.setNewTab(this, tabHost, "tab2", R.string.textTabTitle2, R.drawable.ic_tab_results, R.id.practice_results_tab);

        // Set custom tag on first tab
        View tabView1 = tabHost.getTabWidget().getChildAt(0);
        TextView tabView1Text = (TextView) signUpTabView.findViewById(android.R.id.title);
        signUpTextTab.setTag("TAG_TAB_ONE");

        // Set custom tag on second tab
        View tabView2 = tabHost.getTabWidget().getChildAt(1);
        TextView tabView1Text = (TextView) signUpTabView.findViewById(android.R.id.title);
        signUpTextTab.setTag("TAG_TAB_TWO");
    }
}

然后在你的 Espresso 测试中，你可以像这样访问选项卡：

onView(withTagValue(Matchers.is((Object)"TAG_TAB_TWO"))).perform(click());

- Kio Krofovitch