在Testcafe中如何断言页面RTL/LTR方向？是否需依赖源码输出？

Testcafe本身没有专门的内置API直接指定或断言页面方向，但可以通过操作DOM、检查属性与样式的方式实现，无需完全依赖页面源码输出。

一、断言页面方向（RTL/LTR） #

有两种核心方式可以验证页面方向：

1. 检查根元素的dir属性
   直接获取<html>或<body>等根元素的dir属性值，判断当前设置的方向：

// 断言html元素为RTL方向
await t.expect(Selector('html').getAttribute('dir')).eql('rtl');
// 断言body元素为LTR方向
await t.expect(Selector('body').getAttribute('dir')).eql('ltr');

如果应用使用dir="auto"自动适配方向，也可以直接断言该属性值，或结合实际渲染样式做进一步验证。

2. 检查计算后的CSS direction属性
   若页面方向是通过CSS样式控制而非HTML属性，可获取元素的计算样式来验证实际渲染效果：

// 获取html元素的最终渲染方向样式
const htmlDirection = await Selector('html').getStyleProperty('direction');
await t.expect(htmlDirection).eql('rtl');

这种方式更贴近用户实际看到的页面表现，适合CSS控制方向的场景。

二、触发页面方向切换 #

如果应用通过UI控件（如按钮、下拉框）提供切换功能，直接用Testcafe的交互API模拟操作即可：

// 点击切换方向的按钮
await t.click(Selector('#toggle-direction-btn'));
// 断言切换后的方向
await t.expect(Selector('html').getAttribute('dir')).eql('rtl');

若需直接修改页面方向用于测试，也可以通过eval操作DOM：

await t.eval(() => {
  document.documentElement.setAttribute('dir', 'ltr');
});

三、注意事项 #

• 若使用dir="auto"，浏览器会根据页面内容自动判断方向，此时可同时断言dir属性为auto，并检查实际渲染的direction样式是否符合预期（比如阿拉伯文内容应为rtl）。
• 若页面局部元素单独设置了dir属性，针对特定元素做断言即可验证局部方向。

内容的提问来源于stack exchange，提问作者Dudderzz